2015-07-11 36 views
0

我怀疑这与浏览器中的一些错误有关,涉及不透明度,转场和翻译。铬切断边框和其他视觉故障

我无法重现故障的代码片段,所以我得给你点对活动网站:

tzork.com

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


当您将鼠标放在标签上时,它们会在背面和边框上产生一个宽度为2px的边框。有时候,Chrome只显示一个像素。当我将宽度更改为1px时,有时它根本不显示边框(仅在边角附近)。

OK enter image description here enter image description here enter image description here enter image description here

你可以清楚地看到它是如何变得不一致。我的浏览器缩放比例为100%,所以这不是原因。

我不确定发生了什么,但它显然取决于当前时间=角度=标签的位置和WINDOW SIZE。

我把位置绕到最近的像素,所以分数位置不是原因。 我也尝试舍入到奇数/偶像素,但没有帮助。


另一个问题是,在Firefox,时而盘旋标签使钟面号码移动/变更字间距。我不明白,没有任何联系。

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

回答

0

好了,该解决方案:

我说这一切的地方,并呈现故障已经消失。

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

我不明白。