元素在Safari中获取蓝色背景，Chrome和FF都可以

Question

我有一个按钮可以打开和关闭侧面导航，这是通过过渡动画的CSS。它在Chrome和Firefox中完美运行，也适用于Safari，但按钮获得的这个蓝色背景没有包含在CSS规则的任何地方，所以它看起来像这样：

而不是：

我一直试图找到一个解决方案并包含背面可见性：隐藏和转换：translateZ（0）甚至将颜色更改为RGBA但是那些黑客没有做任何事情。

可以看到这个错误的一半developed website。

Answer 1

我找到了解决方案。

我注意到如果我在 #nav上使用Safari的Web Inspector更改了CSS规则，例如 height ， width 或 translate -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像素，这对我来说真的很令人不安。