元素在Safari，Chrome和FF中獲取藍色背景

我有一個按鈕，打開和關閉通過轉換動畫CSS的側面導航。它完美的Chrome和Firefox和親切的工作在Safari瀏覽器太多，但這樣它看起來像這樣的按鈕獲取的任何位置都未包括在CSS規則這個藍色的背景：元素在Safari，Chrome和FF中獲取藍色背景

，而不是這個：

我一直試圖找到一種解決方案，包括背面能見度：隱藏和變換：translateZ（0）甚至改變顏色到RGBA，但這些黑客沒有做任何事情。

錯誤可以看出是這一半developed website。

來源

2016-08-27 zJorge

我無法在Chrome上重現。 –

@Andrew，你的意思是不能重現de錯誤？這是因爲它在Chrome和FF中按預期工作。這個問題出現在Safari中。 – zJorge

對不起，我錯誤地閱讀了問題標題。 –

我找到了解決方案。

我注意到，如果我改變CSS規則如高度，寬度或使用Safari的網絡督察在＃NAV-toggler或＃nav-toggler.open元素圓是翻譯重新繪製爲指定的顏色。

因此我將transform: translateZ(1px);添加到＃nav-toggler.open強制重繪並解決了問題。

#nav-toggler.open { 
left: 240px; 
transform: translateZ(1); /* added to solve repaint in Safari */ 
-webkit-transition: .5s ease-in-out; 
    -moz-transition: .5s ease-in-out; 
    -o-transition: .5s ease-in-out; 
     transition: .5s ease-in-out; 
}

我最初加入width:50.00001px代替，但即使它僅僅是0.00001像素的它真的打擾到我。

來源

2016-08-28 16:10:58 zJorge

元素在Safari，Chrome和FF中獲取藍色背景

回答

相關問題