浮動視差DIV背景圖像在Chrome/Safari瀏覽器中滾動時嵌入的Vimeo YouTube或Flash

我正在研究視差網頁模板我下載的div具有背景圖像，視差和浮動在其他較低z-index內容。浮動視差DIV背景圖像在Chrome/Safari瀏覽器中滾動時嵌入的Vimeo YouTube或Flash

每當我在下方區域使用iFrame代碼嵌入Vimeo或YouTube視頻時，一旦浮動div「接觸」嵌入式播放器，視差背景圖像將在y方向上跳躍。我相信這個問題與Flash最終被嵌入爲一個嵌入普通頁面的iFrame一樣，可以按照預期工作 - 隨時嘗試。

這隻發生在Chrome和Safari中。 Firefox和IE按預期工作。我從我的Web模板創建了一個精簡的JSFiddle來說明問題。在上述瀏覽器中嘗試一下，你可以看到問題的發生 - 只需要滾動一下結果。

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

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

我真的想找到一個解決，因爲我設計我的整個網站已經和剛纔注意到，在Chrome和Safari這個問題。

注意：問題不在於視差JS代碼。我留下了這樣的感覺，可以看出效果。背景圖片仍然彈出沒有代碼。

來源

2013-06-26 evolross

這是一個有趣的問題。這顯然影響了後臺附件屬性。 –

我嘗試使用HTML5視頻標記，並且可以避免這種效果。 –

嘗試向iFrame添加Z-index。 –

您的代碼建議已經確認您的嵌入代碼是否存在其他wmode=opaque的問題。使用此嵌入，它應該工作：

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

這裏是一個更新的小提琴：http://jsfiddle.net/fxv76/

來源

2013-08-12 20:42:28

只是重新審視這個問題，現在當我測試我的原始JSFiddle時，現在所有瀏覽器中的問題都已修復。將這個答案檢查一下，因爲你的修復程序在Chrome和Safari中仍然被破壞時顯然工作。 – evolross

浮動視差DIV背景圖像在Chrome/Safari瀏覽器中滾動時嵌入的Vimeo YouTube或Flash

回答

相關問題