Floating Parallax DIV Background images of jumps when scrolling embedded Vimeo YouTube or Flash only in Chrome / Safari

Question

I am working on a parallax web template that I downloaded, which has divs with background images that parallax and float on another lower z-index.

Whenever I insert a Vimeo or YouTube video using their iFrame code in the lower area, the background image, which is parallax, will jump in the y direction as soon as the floating div “touches” the built-in player. The problem, which, it seems to me, is due to the fact that Flash is ultimately embedded in iFrame with the normal operation of the page, as expected, do not hesitate to try.

This only happens in Chrome and Safari. Firefox and IE are working properly. I created a cut JSFiddle from my web template to illustrate the problem. Try it in the browsers above and you can see that the problem is happening - just scroll the result a bit.

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

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

I really want to find a fix because I already developed my entire site and now noticed this problem in Chrome and Safari.

NOTE. The problem is not the parallax JS code. I left it so that a sense of effect can be seen. The background image still appears without this code.

Answer 1

In your source code there is wmode=opaque inside it. Use this insert and it should work:

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

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