Fullpage.js: On scroll with a video background bug

[weareburo]

I have a video on background, an overlay + some text. When i scroll and come back to the video section my overlay and text disapeared even if my z-index is ok.
My sample home is here :https://dl.dropboxusercontent.com/u/29620302/fullPage.js-master%203/examples/home.html
Any Idea ? Does i need to adjust this with unleave function ?

[alvarotrigo]

Your example doesn't work for me.

[weareburo]

Sorry it was jquery over https - it is ok now
Apologizes

2014/1/22 alvarotrigo [email protected]

Your example doesn't work for me.

—
Reply to this email directly or view it on GitHubhttps://github.com/alvarotrigo/fullPage.js/issues/183#issuecomment-33042840
.

büro
4 rue Leconte de lisle
751016 PARIS
www.weareburo.com
[email protected]
Portable / cel : 06 52 13 40 26
skype id: rubiojamin

[alvarotrigo]

It doesn't seem to be a problem related with fullpage.js. Maybe with a video and css3 translate3d.
Try it by using css3:false.

Or the simple option. Use onLeave or afterLoad to set the z-index for the text again. That might do the job as it does by changing it through the dev tools.

[arnisjuraga]

I have the same problem. Could not fix it with any "z-index" settings, but @alvarotrigo is right - setting css3: false is a workaround.

Now - video stays at background, although - Chrome now works notably slower with scroll and video playback.

This problem is visible also on Fullpage.js Example page http://alvarotrigo.com/fullPage/examples/videoBackground.html

• open page
• scroll down,
• scroll back to 1st section - You will see, that Text is not visible at first moment, because Video has come to the very Front.
  And only after full load, text appears.

Is it configurable, to keep css3: true but fix the scrolling with video background?

[alvarotrigo]

@arnisjuraga see my answer here. It's a browser's bug.

Just apply translate3d to your text or element having the issue:

.text {
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

[arnisjuraga]

Excellent!