Bug 156130 - non-integer transform scale values result in 1px white lines being rendered
Summary: non-integer transform scale values result in 1px white lines being rendered
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 9
Hardware: Mac OS X 10.9
: P2 Normal
Assignee: zalan
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-04-02 05:25 PDT by Zsolt Ero
Modified: 2016-05-17 20:29 PDT (History)
4 users (show)

See Also:


Attachments
html reproducing the case (3.08 KB, text/html)
2016-04-02 05:25 PDT, Zsolt Ero
no flags Details
screenshot (35.46 KB, image/png)
2016-04-02 05:28 PDT, Zsolt Ero
no flags Details
Test reduction (318 bytes, text/html)
2016-05-17 20:29 PDT, zalan
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Zsolt Ero 2016-04-02 05:25:20 PDT
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.
Comment 1 Zsolt Ero 2016-04-02 05:28:39 PDT
Created attachment 275464 [details]
screenshot
Comment 2 Radar WebKit Bug Importer 2016-04-04 10:41:30 PDT
<rdar://problem/25531063>
Comment 3 Zsolt Ero 2016-04-24 16:47:19 PDT
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
Comment 4 zalan 2016-05-17 20:29:44 PDT
Created attachment 279206 [details]
Test reduction