Overview: background-size appears to incorrectly scale when repeated across background, causing it to repeat more times than it should. Steps to reproduce: Visit this link for a working example: http://jsfiddle.net/vwKv3/1/ Actual results: Note that the triangles in columns 5 and 7 (CSS classes "repeater e" and "repeater g" respectively) show a portion of an additional triangle at the bottom of the column. Expected results: The triangle stack should repeat a precise number of times according to the background-size of the div, have an extra bit of triangle at the bottom. Platforms: Seems to happen on Chrome on both Win 7 and Win Vista, Safari and Chrome on Mac OSX
(In reply to comment #0) Looks like column 7 (repeater g) is actually correct, whoops! But column 5 does correctly expose the behavior I noted above.
Checked the code and found the route cause of the issue. The issue is happening because of the Float point error. As per the given test case, When Image is drawn as per style property height of the Image should be 37.5. While doing the calculation for the height int RenderBoxModelObject::calculateFillTileSize, Float is being considered when we calculate the height. After this we create a Object for type LayoutUnit and pass the float value as a parameter,which in turn stores it as an int value has the value is reduced to 37 which creates the difference at the end.
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.