保证金和Float Pixelate线性渐变（Chrome bug？）

Question

在下面的小提示中，如果你注释掉CSS的margin / float属性，那么块看起来不错。

为什么渐变在那里弄乱了？

＆＃34;搞砸了＆＃34;我的意思是（注意线条不平滑）：

（请不要尝试在解决方法中修复它，我知道如何做到这一点，这不是这个问题的重点。）

Fiddle

.rec {
   margin: 10px; 
   float: left;
   height: 50px;
   width: 50px;
   background: linear-gradient(135deg, rgb(134, 108, 83) 0%, rgb(134, 108, 83) 12.5%, rgb(127, 107, 86) 12.5%, rgb(127, 107, 86) 25%, rgb(228, 175, 104) 25%, rgb(228, 175, 104) 37.5%, rgb(254, 221, 139) 37.5%, rgb(254, 221, 139) 50%, rgb(48, 44, 43) 50%, rgb(48, 44, 43) 62.5%, rgb(237, 232, 226) 62.5%, rgb(237, 232, 226) 75%, rgb(200, 193, 192) 75%, rgb(200, 193, 192) 87.5%, rgb(157, 151, 151) 87.5%, rgb(157, 151, 151) 100%);
}

我在 Chrome 48.0.2564.116（64位）上进行此测试

更新

正如莱斯特所指出的那样，-webkit-backface-visibility: hidden;解决了这个问题。事实证明-webkit-transform: translate3D(0,0,0);也解决了这个问题。也许任何基于-webkit的寻址命令都会出于某种原因。

尽管如此，最初的问题仍然没有答案，但增加了这个难题。

Answer 1

-webkit-backface-visibility: hidden;

这可以解决chrome中的问题，因为在其他浏览器中，别名可以正常工作