當背景圖像被修復時，滾動在chrome中不穩定

我正在嘗試創建一個視差網站。但後來我遇到了固定定位的問題。當背景圖像被修復時，滾動在chrome中不穩定

我有幾個部分，每個部分都有一個background-attachment:fixed。 A position:fixed頂部有一個隱藏元素的菜單欄，位於所有部分的頂部。谷歌地圖100％在其中一個部分。

現在，問題是當我在谷歌瀏覽器中使用動畫滾動頁面時，滾動不順暢，滾動時閃爍多次。

我用scrollS滾動scrollTo插件，但這不是問題，因爲我也用jquery .animate()方法測試它。同樣的結果。

我做了研究，並且發現了鉻與固定定位錯誤或問題（有時當你把隱藏的元素在裏面）有些建議使用這兩種與固定的元素：

-webkit-backface-visibility:hidden; 
-webkit-transform: translateZ(0);

我將此添加到固定菜單中，並且它的一些波動行爲減少了，但仍然不流暢。如果我將這添加到background-attachment:fixed元素的部分，滾動動畫將變得流暢，但不會再像以前那樣固定。

大人物說，鉻有大的圖像問題，有的說它有問題，有固定的位置和大人物有一個解決方案，並沒有爲我工作：d

我上傳的網頁： http://www.FarzanMohajerani.com/test/parallax 只需點擊任何地方在頁面上滾動。

我也創建了一個完全相同的代碼jsFiddle。但我不知道爲什麼它沒有問題的jsfiddle： http://jsfiddle.net/Farzanmc/cRqxT/5/

這將是巨大的，如果任何人都可以告訴我怎麼去正確的解決方案，或者提醒我，如果我做錯什麼。由於

來源

2013-06-04 Farzanmc

我也上傳了頁面的zip文件，如果有人有興趣下載和看看：http://www.FarzanMohajerani.com/test/parallax/Parallax.zip 我試過stellar.js教程tutsplus：http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html 即使在那裏，在最後一張幻燈片中，背景圖像被固定，滾動動畫在最後幾秒內變得不連貫。 – Farzanmc

I」，此刻具有鉻同樣的問題，我縮小的原因爲以下組合：

1）背景：固定; 2）變換：（任何變換，即使只是放置比例（1），也會立即破壞它）。

只要包含固定背景圖像的元素對其沒有任何「變形」，它就可以正常工作。但是，只要你添加「變換：尺度（1）」;實際上並沒有進行真正的轉換，它完全打破了固定的背景圖像。你可以開始滾動，但它會消失。如果它在屏幕之外，無論你滾動多遠，它都不會出現。

因此，本質上，問題是Chrome目前無法處理已轉換元素中的固定背景圖像。無論我們談論的是哪一級別的後裔或祖先。事情是，這幾乎是一個重要的東西，我真的希望能夠儘快得到解決，因爲它非常有限。您不能忽視Chrome，就好像IE6一樣。

而且你不能申請「position：fixed;」在一個「img」元素上，因爲它將被固定到第一個「轉換」的祖先，而不是真正的屏幕，因爲這顯然是它應該如何處理，根據W3C。雖然，一些新的價值會受到歡迎，但有些可能會一直打破窗口，並固定在這些座標上。

來源

2014-01-16 04:00:09 user3200878

我跑了我一個相同的問題，並以這種方式修復它：我不得不在網站上處理固定標題，並隨時用鼠標滾輪滾動標題會變得不穩定....我有一個顯示器：頭文件中沒有元素，只要我刪除元素，頭部變得固定和穩定，現在無論滾動多快，它都能很好地顯示。

來源

2014-10-01 04:59:27 n1cko

這解決了這個問題對我來說：

-webkit-transform: translate3d(0,0,0);

添加這條規則變成元素成在Chrome瀏覽器層，避免了重新粉刷。在我獨特的情況下，錯誤是由瀏覽器重新繪製造成的。

來源

2016-10-09 18:48:51

當背景圖像被修復時，滾動在chrome中不穩定

回答

相關問題