CSS3轉換導致文本在Safari和Firefox中閃爍優勝美地

我在Safari和Firefox（Mac/Yosemite）上出現這個奇怪的問題，導致頁面上的幾乎所有文本在懸停在轉換元素上時閃爍。CSS3轉換導致文本在Safari和Firefox中閃爍優勝美地

如GIF：（火狐，優山美地）

enter image description here

.usp { 
    //USP has an icon that is defined below 
    opacity: .4; 
    @include transition(all .3s ease-in-out); 


    &:hover { 
     opacity: 1; 
     @include transition(all .3s ease-in-out); 


     .icon { 
      @include transform(scale(1.1)); 
      @include transition(all 1.7s ease-in-out); 
     } 
    } // :hover 
} 

.usp .icon { 
    display: block; 
    height: 75px; 
    width: 75px; 
    // Insert background-image sprite (removed from this example) 
    @include transition(all .3s ease-in-out); 
    @include transform(scale(1.0)); 
}

我已經試過了以下幾件事：

這些風格每一個可能的組合添加到體內，變換元件和/或他的父母

-webkit-transform-style:preserve-3d; 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
-ms-backface-visibility: hidden; 
backface-visibility: hidden; 
-webkit-filter: opacity(.9999); 
-webkit-font-smoothing: antialiased; 
-webkit-transform: translate3d(0, 0, 0); 
-moz-transform: translate3d(0, 0, 0); 
-webkit-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0); 
-webkit-font-smoothing: subpixel-antialiased; 
-webkit-text-stroke: 0.35px;

如果（st下面的yles）應用於身體，但問題在Safari中解決，但不在Firefox中解決，因爲它不是webkit瀏覽器。

-webkit-transform: translate3d(0, 0, 0); 
-webkit-text-stroke: 0.35px;

我幾乎不知道是什麼原因造成的，以及我如何修復它！

來源

2015-06-04 Rick Doesburg

請在http://jsfiddle.net上添加代碼片段。 –

我試過儘可能最好的創建小提琴。（因爲整個網站使用了很多風格，我不能複製/粘貼某些東西）。不知何故，這個小提琴在FF中工作，而不是在Safari中工作。 http://jsfiddle.net/Mr_recci/j04mayvb/2/ –

@MrRecci由於jsfiddle不支持sass，我認爲你的那些小提琴中的一些風格缺失。 –

好吧！

經過一週的測試，刪除和添加CSS規則，我終於找到解決方案，解決了我的問題。我最初在Firefox 39和Safari 9中都遇到過這個問題，但Firefox在最新的更新中神祕地修復了它自己。然而，Safari沒有。問題與頁面上元素的3D渲染有關。我試圖縮放的元素必須轉換爲3D上下文，頁面上的閃爍元素在2D和3D之間切換，如@ Woodrow-Barlow在其他答案中所解釋的。

通過添加

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

到閃爍的元素，從而使它們在3D在頁面加載，他們不再需要切換！

編輯1：對於誰在其他瀏覽器這個問題的人，看看在CSS「將變」屬性： https://dev.opera.com/articles/css-will-change-property/

來源

2015-07-29 12:51:48

完美的解決了在Firefox和Chrome中都可以使用但在Safari中無法使用的不透明度轉換的相同問題。（我認爲Chrome會展現類似的行爲，但不會。） – SexxLuthor

-webkit-transform: translate3d(0, 0, 0); 
-webkit-text-stroke: 0.35px;

這些代碼是爲支持多種瀏覽器而編寫的。嘗試一下本作mozila

-moz-transform: translate3d(0, 0, 0); 
-moz-text-stroke: 0.35px;

來源

2015-06-04 07:24:02 Tuku

謝謝，我已經嘗試將它們添加到身體和轉換元素。仍然是同樣的問題。文字筆畫不存在與-moz前綴 –

你可以在這裏做一個片段，它會更好地知道這個問題。 – Tuku

我試過盡我所能創造了一個小提琴。（因爲整個網站使用了很多風格，我不能複製/粘貼某些東西）。不知何故，這個小提琴在FF中工作，而不是在Safari中工作。 http://jsfiddle.net/Mr_recci/j04mayvb/2/ –

我發現這種情況主要發生在已經轉化的要素（即：即滑入一個模式）。是否有任何父元素的變換？

網絡上有很多基於webkit的瀏覽器的修復程序，但Firefox沒有。

來源

2015-06-17 23:06:24

不！父母只是普通的div，沒有任何翻譯或變換。我也發現了（並嘗試過）修復，但它們都是一種哈克。 –

唉唉，但你有沒有試過

.usp .icon { 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
}

http://jsfiddle.net/j04mayvb/4/

老實說，我不知道爲什麼這個工作，但我可以看到它停在Safari瀏覽器的小提琴閃爍。

來源

2015-07-23 20:44:25 MattDiamant

奇怪的是，這在Safari中並不適用於我。我已經添加了其他前綴，並且它在Firefox中也不起作用。 http://i.imgur.com/7wGUDFE.gifv –

你能看到我發佈的jsfiddle鏈接工作嗎？或者在Safari中閃爍？ – MattDiamant

@MrRecci你有沒有嘗試過，除了webkit之外還包括了un-prefixed變換？ –

對OP的說明：您似乎至少知道這些概念中的大多數，但我已經爲其他任何可能有類似問題的人在此答案中包含了大量的詳細信息。

在具有專用GPU（用於渲染圖形的處理器）的計算機上運行的現代瀏覽器中，瀏覽器有時會將渲染網頁的任務從CPU（「常規」處理器）轉移到GPU。 CPU和GPU各有其優缺點--GPU的本質是它可以非常高效地渲染三維變換，但可能無法像CPU那樣清晰地渲染純文本。

您的懸停效果使用的是您的瀏覽器認爲適合硬件加速GPU渲染的轉換（最有可能由scale(1.1)轉換觸發），因此它在暫停動畫/轉換髮生時將渲染臨時轉移到GPU 。動畫完成後，CPU再次接管渲染。由於不同的硬件使用不同的渲染策略，因此在GPU負責時，文本看起來不同（不那麼清晰）。

不幸的是，我們還沒有（通過CSS）明確控制硬件加速 - 瀏覽器會隨時設置它。但是，我們可以做的是設置一些屬性，我們懷疑將使瀏覽器處於硬件加速GPU模式。這裏的理論是，即使動畫沒有出現，我們也會保持瀏覽器處於GPU模式，這樣我們就不會看到「閃爍」。

該策略有一些缺點：訪問您的網站的用戶在頁面打開時會稍微增加RAM內存使用量，移動/筆記本電腦用戶的電量消耗會略微增加。在沒有專用GPU的設備上，硬件加速將不會被觸發（但再次，這些設備不會看到您看到的閃爍）。

看起來您已經試圖通過將scale(1.0)屬性添加到非懸停元素來實現此目的 - 我最好的猜測是您的瀏覽器「聰明」並且檢測到此規則什麼也不做，忽視它。觸發硬件加速的最可靠方法通常是在Z軸上進行轉換。試着改變你的變換，將以下內容：

@include transform(scale(1.00001), translateZ(0.00001));

而不是使用的值「1」和「0」時，我使用的是無限接近值;希望這可以防止瀏覽器變得「聰明」而忽略規則。

我假設你的Sass包括做供應商前綴。仔細檢查最終輸出不僅包含-webkit-transform:和-moz-transform:，還包含未加前綴的transform:語法。如果你想成爲某些（用於調試的目的），只是手動鍵入出來：

.usp .icon { 
    transform: scale(1.00001), translateZ(0.00001); 
    -webkit-transform: scale(1.00001), translateZ(0.00001); 
    -moz-transform: scale(1.00001), translateZ(0.00001); 
}

在我結束，我沒有遇到任何閃爍，開始對你的小提琴（我懷疑我的瀏覽器/ OS /硬件配置不認爲2維尺度適合GPU），所以我無法測試此代碼。不過，我也經常使用類似的技術來解決類似的問題。

來源

2015-07-24 18:17:40

謝謝！關於渲染的解釋是完美的，給了我一些關於在哪裏尋找答案的指針。然而，提供的解決方案並沒有幫助。添加-webkit-transform：translate3d（0，0，0）爲我修復了它。（看我的其他答案） –

很奇怪。 translate3d只是一個簡寫，包括translateX，translateY和translateZ。無論如何，很高興你把它修好了。 –

OK！

所以，我面臨的問題是在一個自定義的彈出窗口中，我對使用css轉換的十字按鈕有一個輪子效果。但是這在彈出窗口中引起了閃爍問題。

訪問各種在線門戶網站後，我才知道是過渡性質：

webkit-backface-visibility: hidden;

的過渡元素上真正起作用並停止閃爍。但是使用這個屬性模糊了我的情況，並停止整個組件（彈出），我不得不使用其他屬性部件的根元素：

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

，但因爲我是在自定義彈出使用它已經在y方向上翻譯了-50％以保持它在中心位置，我被限制不使用它。

與CSS屬性玩了幾天，嘗試各種解決方案後，我來到了道達爾在過渡元素用於必須EVEN和動態數據的情況下，部件高度的結論，我們需要調整邊距和填充方式使總高度保持爲EVEN。

這解決了我的問題。只要確保總高度仍爲即使並相應地調整邊距和填充。

希望它可以幫助任何需要幫助的人。 :)

來源

2016-10-14 08:38:29 avi

我們也一直在尋找數週試圖解決這個問題。您可以使用像上面提到的那些技巧來將元素放置在它自己的GPU圖層中。但是這會導致文本被轉換成位圖，因此模糊。

在我們的案例中，問題發生是因爲一個像素。當您使用平移-50％或使用％尺寸來居中模態。此容器內的子元素可以獲得一個位置（取決於模態的寬度/高度）。在chrome中，您可以簡單地在計算出的選項卡中的一個元素上進行檢查。如果有一個位置，當鼠標懸停在不同的元素上時，可以看到它們「跳躍」，如動畫的css按鈕。

當您將鼠標懸停在CSS按鈕上時，它不僅呈現元素本身，還呈現頁面中的其他元素。由於有一個位置，你可以看到元素跳轉。

規模在我們的例子中，我們有一個第二個問題，我們希望縮小完整的頁面，當用戶正在訪問的頁面與一個較小的屏幕。起初，我們使用了翻譯（縮放）。母公司的規模也導致了一個子元素的位置。假設您的比例是0.8343493。在這種情況下，子元素會被重新計算，並且可以簡單地得到一個。使用css3動畫，您會遇到與上述相同的問題。

經過數週的搜索，Chrome的答案非常簡單，我們現在使用較舊的選項zoom：1.0代替translate：（scale 1.0）。結果是，我們現在有一個清晰而不閃爍的頁面。

Example end-result with scale & non-flickering buttons & transitions:

來源

2017-08-25 10:47:32

CSS3轉換導致文本在Safari和Firefox中閃爍優勝美地

回答

相關問題