元素在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中获取蓝色背景

回答

相关问题