マージンと浮動小数点の線形グラデーション（Chromeのバグ？）

Question

次のフィドルでは、CSSの余白/浮動小数点数のプロパティをコメントアウトするとブロックがよく見えます。

なぜグラデーションがそこで乱されていますか？

（私はそれを行う方法を知っているし、それはだ、この問題を回避するにはそれを修正しようとしないでください。私は（ラインが滑らかされていません注意してください）を意味し、「めちゃくちゃ」と

この質問のないポイント。）

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%); 
} 

私はクロームにこのテストをやっています48.0.2564.116（64ビット）

更新：

レスターは、-webkit-backface-visibility: hidden;修正これを指摘したように。その一方で、-webkit-transform: translate3D(0,0,0);もこれを修正しています。おそらく-webkitベースのアドレス指定コマンドが何らかの理由でこのトリックを行うでしょう。

まだ、元の質問は未解決のままですが、このパズルが追加されています。

Answer 1

-webkit-backface-visibility: hidden; 

これは、他のブラウザでエイリアスが