Margin & Float Pixelate Linear Gradient (Chrome bug?)

Question

In the following fiddle, the block looks good if you comment out the margin/float properties of the CSS.

Why is the gradient messed up with them there?

By "Messed up" I mean (notice the lines are not smooth):

(Please don't try to fix it in a workaround, I know how to do that and that's not the point 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'm doing this test on Chrome 48.0.2564.116 (64-bit)

Update:

As Lester pointed out, -webkit-backface-visibility: hidden; fixes this. Turns out that -webkit-transform: translate3D(0,0,0); fixes this as well. Maybe any -webkit based addressing command will do the trick for some reason.

Still, the original question remains unanswered, but with the addition of this puzzle.

Answer 1

-webkit-backface-visibility: hidden;

This may solve the problem in chrome, because in other browser the aliased works fine