javascript - Chrome 切断边框和其他视觉故障

Question

我怀疑这与浏览器中的一些错误有关，涉及不透明度、过渡和翻译。

我无法在代码片段中重现该故障，因此我必须将您指向实时站点:

tzork.com

我的完整源代码在这里:MightyPork/tzork ，包括编译成 CSS 和 JS 的 SCSS 和 Typescript。如果您有时间并且可以重现错误，如果您尝试找出问题所在，我将不胜感激。我以前从未见过这样的事情。

---

当您将鼠标放在标签上时，它们会在一侧出现背景和边框，宽度应为 2 像素。但有时，Chrome 只会显示一个像素。当我将宽度更改为 1px 时，有时它根本不显示边框(仅在 Angular 落附近)。

您可以清楚地看到它变得多么不一致。我的浏览器缩放为 100%，所以这不是原因。

我不确定发生了什么，但这显然取决于标签的当前时间 = Angular = 位置和窗口大小。

我将位置四舍五入到最近的像素，所以小数位置不是原因。我也尝试四舍五入到奇数/偶数像素，但也没有帮助。

---

另一个问题是，在 Firefox 中，有时悬停标签会导致钟面上的数字移动/更改字母间距。我不明白，根本没有联系。

在 chrome 中，有时会在背景图像上出现奇怪的平铺故障(特别是当开发工具面板打开时)。

Answer 1

好的，所以解决方案:

我在各处添加了这个，渲染故障消失了。

-webkit-transform: translate3d(0,0,0);

我不明白。