Margin＆Float Pixelate线性渐变（Chrome bug？）

在下面的小提琴中，如果您注释掉CSS的边距/浮动属性，该块看起来不错。Margin＆Float Pixelate线性渐变（Chrome bug？）

为什么渐变在他们那里搞砸了？

通过“搞砸了”我的意思（注意线条不流畅）：

（请不要尝试修复它的解决办法，我知道该怎么做，这就是这个问题不是问题的关键。）

.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的寻址命令可能会起作用。

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

来源

2016-03-03 Omri Aharon

我看到梯度没有什么区别，如果我删除这两个属性。 – sma

@哈利是的一刻。 –

@sma更新了，更清楚了吗？ –

-webkit-backface-visibility: hidden;

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

来源

2016-03-03 14:58:08

好吧，似乎是固定的，但为什么？铬是否搞乱了元素的背面和正面？铬本身是一个错误吗？谢谢:) –

嗯，我不知道100％，但原因可能是一个渐变（数学上讲）有时不平坦，这可能会导致一种3d层，所以浏览器不会渲染它所以重要的是'让它们平坦'以避免那些凌乱的边缘，所以背面隐藏了那些:) –

它是有道理的。大脑笔记为未来:) –

Margin＆Float Pixelate线性渐变（Chrome bug？）

回答

相关问题