Bug 156130 – non-integer transform scale values result in 1px white lines being rendered

• Status: NEW
• Component: Layout and Rendering

[Zsolt Ero]

Created attachment 275463 [details]
html reproducing the case

URLs (if applicable) : http://playground-leaflet.rhcloud.com/say/1/edit?html,output
Other browsers tested: Firefox, Safari, IE
  Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
     Safari: FAIL
    Firefox: OK
         IE: OK

What steps will reproduce the problem?
(1) Open the above URL: http://playground-leaflet.rhcloud.com/say/1/edit?html,output or the attached file.
(2) Look at the rendered black div 


What is the expected result?
The rendered black div should be solid, with no 1px white lines visible.


What happens instead?
There are 1px white lines between the 256x256 image tiles. Firefox / IE renders it correctly, with no white lines.


Please provide any additional information below. Attach a screenshot if
possible.
This is a critical issue for the Leaflet interactive map library, used by millions of users, which we cannot fix without upstream help. 
On non-integer zoom levels (thus non-integer transform scale values) in Webkit browsers, there are 1px white lines appearing on the map. Firefox and IE render the same map perfectly.
This is a minimal, CSS-only reproduction case of the issue.

[Zsolt Ero]

Created attachment 275464 [details]
screenshot

[Radar WebKit Bug Importer]

<rdar://problem/25531063>

[Zsolt Ero]

Just an interesting finding: it doesn't need images to produce this behaviour, it works similarly (but exactly the same) with simple divs:
http://playground-leaflet.rhcloud.com/foqi/1/edit?html,output

[alan]

Created attachment 279206 [details]
Test reduction