css - 元素在 Safari、Chrome 和 FF 中获得蓝色背景是可以的

Question

我有一个按钮可以打开和关闭侧边导航，它是通过过渡动画的 CSS。它在 Chrome 和 Firefox 中完美运行，在 Safari 上也能正常运行，但是按钮的蓝色背景没有包含在 CSS 规则中，所以它看起来像这样:

而不是这个:

我一直在努力寻找一个解决方案，包括 backface-visibility: hidden 和 transform: translateZ(0) 甚至将颜色更改为 RGBA，但那些 hacks什么都没做。

bug可以看出是这一半developed website .

Answer 1

我找到了解决方案。

我注意到，如果我在 #nav 上使用 Safari 的 Web 检查器更改 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 像素，它也让我很不安。