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

通过“搞砸了”我的意思是(注意线条不平滑)：

(请不要尝试在解决方法中修复它,我知道如何做到这一点,这不是这个问题的重点.)

Fiddle

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

我在Chrome 48.0.2564.116(64位)上进行此测试

更新：

正如Lester指出的那样,-webkit-backface-visibility：hidden;解决这个问题.结果是-webkit-transform：translate3D(0,0);修复此问题.也许任何基于-webkit的寻址命令都会出于某种原因.

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

解决方法

-webkit-backface-visibility: hidden;

• 上一篇：css – React.js转换不适用于“淡出下一篇：CSS风格