元素在Safari，Chrome和FF中获得蓝色背景就可以了

Question

我有一个按钮可以打开和关闭侧面导航，该侧面导航是通过过渡设置的CSS动画。 它可以完美地在Chrome和Firefox中运行，也可以在Safari上运行，但是该按钮具有蓝色背景，而CSS规则中并未包含该蓝色背景，因此如下所示：

代替这个：

我一直在尝试找到一种解决方案，并包括背面可见性：隐藏和转换：translateZ（0）甚至将颜色更改为RGBA，但这些技巧并没有做任何事情。

可以看到的错误是这一半开发的网站 。

Answer 1

我找到了解决方案。

我注意到，如果我在＃nav-toggler或＃nav-toggler.open元素上使用Safari的Web Inspector更改了高度 ， 宽度等CSS规则或进行了转换，则圆圈将重新绘制为指定的颜色。

所以我添加了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像素，也确实让我感到困扰。