In the following script, the block looks good if you comment on the margin / float CSS properties.
Why is the gradient messed with them?
By "messed up" I mean (note that the lines are not smooth):
(Please do not try to fix this in a workaround, I know how to do this, and this is not a question of this question.)
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%); }
I am doing this test on Chrome 48.0.2564.116 (64-bit)
Update:
As Lester noted, -webkit-backface-visibility: hidden; corrects this. It turns out that -webkit-transform: translate3D(0,0,0); corrects this. Maybe any addressing command based on -webkit will do the trick for some reason.
However, the original question remains unanswered, but with the addition of this puzzle.