Floating Parallax DIV Background Image Jumps When Scrolled Over Embedded Vimeo YouTube or Flash in Chrome/Safari Only

Question

I'm working on a parallax web template I downloaded that has divs with background images that parallax and float over other lower z-index content.

Whenever I embed a Vimeo or YouTube video using their iFrame code in the lower area, the background image that parallaxes will jump in the y-direction as soon as the floating div "touches" the embedded player. The problem I believe has to do with Flash ultimately being embedded as an iFrame with a normal page embedded works as expected - feel free to try it.

This only happens in Chrome and Safari. Firefox and IE work as expected. I've created a stripped down JSFiddle from my web template to illustrate the problem. Try it out in the above browsers and you can see the issue happening - just scroll the result a bit.

http://jsfiddle.net/wU2DU/2/

Too much code - just see the JSFiddle - that's the easiest way to see the issue

I really want to find a fix because I've designed my whole website already and just now noticed this problem in Chrome and Safari.

NOTE: The problem isn't in the parallax JS code. I left that in just so a sense of the effect can be seen. The background image still pops without that code.

Answer 1

Your embed code source has wmode=opaque inside it. Use this embed and it should work:

<iframe src="http://player.vimeo.com/video/60982085" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" wmode="transparent"></iframe>

Here is an updated fiddle: http://jsfiddle.net/fxv76/