css - Skrollr Troubles With Chrome Browser -

css - Skrollr Troubles With Chrome Browser -

i'm learning how utilize skrollr.js library. awesome cool tool on using scroll bar in dom manipulate appearance of web site. have bit of steep learning curve understand how works. i'm playing simple sample. have image want remain on screen in background 500% of vertical height. have other text items want scroll in foreground. wanted test , have 1 of text items fade zero.

helpful references: classic parallax scrolling example, , i hate tomatoes example

i've got image in div loaded in position: fixed; location, , few divs in scrolling area below <div id="skrollr-body"> have text header wanted fade 0 utilize scroll bar. note: started skrollr.init() without arguments. also, not using jquery @ all.

my problem works erratically on chrome, , works fine on firefox browser. i'm @ loss figure out why?

i've created jsfiddle exhibit issue. http://jsfiddle.net/q3z3v6op/4/ fiddle works same test program; flaky on chrome, okay on firefox. when looking in chrome dev tools, can see reddish box text opacity value changing correctly 0 box goes towards top of display, actual display doesn't fade of time. can work if go chrome dev tools, open drawer (where console / search / emulation / rendering tab is), select 'rendering' , click on [ ] enable continuous page repainting.

anybody else been here? ideas what's going on issue? many thanks.

i updated fiddle. little bit of different approach, should more cross browser compatible. guess chrome not display: block , opacity: 0. looks bug. tested in on safari (which webkit) , not have problem. using inline-block able prepare bug on chrome.

http://jsfiddle.net/christianjuth/q3z3v6op/5/

fixed code:

.hscontent { display: inline-block; position: absolute; left: 50%; width: 400px; margin-left: calc(-200px - 8%); color: #ebebeb; padding: 0% 8%; text-align: center; }

css google-chrome skrollr