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？）

回答

相關問題