Sub-pixel translation of image grid causes visual glitch in the form of gray lines
Reported by
nick.joh...@nec.co.nz,
Mar 26 2018
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36 Steps to reproduce the problem: 1. Save index.html and rainbow.jpg to the same directory 2. Open index.html 3. You will see a grid of gray lines between the images What is the expected behavior? The expected behaviour is that there are no visual artifacts between the images. What went wrong? The core of this reproducer is the `transform: translate(0.3px, 0px);` applied to the div that contains our images. Somehow as part of applying the subpixel translation we end up with gaps between the images where none existed prior to the translation. Please note that the value `0.3px` is mostly arbitrary, any value that results in misalignment with the underlying display will show this behaviour. Worth noting that `0.5px` will not reproduce the issue on a retina MacBook due to the doubled density of the display. Additionally it appears this behaviour exists in Chrome on Windows as well, and additionally shows up in Safari on Mac. Firefox and Internet Explorer handle this situation correctly. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 65.0.3325.162 Channel: stable OS Version: OS X 10.12.6 Flash Version: This is important because tools like Leaflet.js use a grid of translated images to provide basemaps in browsers too old to support canvas or webgl. One possible workaround is to round the translation before applying it, but this seems sub-par since subpixel translation is actually useful on retina displays. It's also worth noting that the issue doesn't show up using `translate3d`.
,
Mar 26 2018
Able to reproduce this on reported version 65.0.3325.162, on latest stable 65.0.3325.181 and latest canary 67.0.3379.0 using Windows 10, Mac 10.13.3 and Ubuntu 14.04. Gray line is seen b/w images. NOTE: Issue is not seen in HiDPI windows machine. This issue is seen from M-60. Hence considering this issue as Non-Regression and marking as Untriaged.
,
Mar 26 2018
This is a layer position snapping issue, I think, but it might also be the old "all divs are pixel snapped" issue. In the latter case we should be accumulating offsets to avoid this. Out of curiosity, who is running browsers too old to support canvas and/or WebGL? A browser that old seems like a major security issue for those users.
,
Mar 27 2018
Dear Chromium team, As one of the contributors of Leaflet.js, I've opened the original bug in Leaflet: https://github.com/Leaflet/Leaflet/issues/6101 The problem is Leaflet is installed on literally millions of websites and the recent Chrome releases starting introducing really ugly 1px grey borders around tiles. Have a look at this interactive example: https://codesandbox.io/s/ql1ymyr0n6 While we might be able to come up with a hack/workaround, it'll leave all existing websites with Leaflet maps in a visually glitchy (ugly) state. This is not present on Safari nor Firefox, only on recent Chrome.
,
Mar 27 2018
@Schenney: One of the reason Leaflet is popular is because it's the lightest map browser for iframe map embeds and mobile phones. It's lighter and more responsive on those devices compared to OpenLayers and Mapbox GL. It's core design is to use img elements instead of a canvas / WebGL, and this will never change in the future.
,
Mar 27 2018
In comment #4 you say this issue was recently introduced. Can you tell us when it started so we can try to identify what changed?
,
Mar 28 2018
I'm not sure that this issue was recently introduced. I tested my reproducer against some older versions of Chromium: 2017-03-03, commit position 454475 - fails 2016-04-09, commit position 386259 - fails I'm not sure what the best way to install old versions on Mac is, but I followed this gist: https://gist.github.com/cletusw/c0d65c6b014b5a026da1 I then pulled my Chrome versions from here: http://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Mac/386259/ I would have kept going back further but at a certain point older versions don't actually work on my machine. Someone also commented on the Leaflet issue with this: "Hello, sorry I don't know the first version, I downgraded and checked Chromium 61.0.3163.100-1.fc27 and the borders show there too if I do a quick pan and release the mouse button, they show until the animation has ended." This makes me wonder if this behaviour has existed for a long time in Chromium, but only recently something else has changed that exacerbates this issue. What the other factor could be I'm not sure, since it seems to happen across different operating systems and even seems to impact Safari as well. In contrast to #4 which states that this doesn't impact Safari, I have a difference experience. Safari both shows the issue with the reproducer on my system and with Leaflet as well (Safari Version 11.0.3 (12604.5.6.1.1)). There is also the possibility that this issue has *always* existed, but I would be quite surprised by that. I have yet to see any evidence that proves that this is a regression.
,
Apr 16 2018
The NextAction date has arrived: 2018-04-16
,
May 1 2018
Hello, I have discovered that this issue is a duplicate of https://bugs.chromium.org/p/chromium/issues/detail?id=600120, which was originally reported in 2016. I also found another, older leaflet issue, dating back to July 2015. https://github.com/Leaflet/Leaflet/issues/3575 It would be great to see a resolution to this issue, as it introduces a noticeable graphical glitch that is frankly embarrassing when demonstrating our product in Chrome. Firefox handles this issue correctly, as does IE11. Is there any other assistance I can provide to resolve this issue? I am getting to the point where I am tempted to try writing a patch myself, but the Blink codebase is quite large, so I feel I could waste a lot of time just familiarising myself with the structure, so that's probably not a very cost efficient use of my time at work. If anyone familiar with the compositing or painting systems wants to weigh in with their estimate of what subsystems the bug might be found in, I would appreciate that.
,
May 31 2018
Issue 846272 has been merged into this issue.
,
Aug 11
Hey there, is there any chance to have this fixed ? The issue is still present.
,
Aug 13
As the original bug says, this is hard to fix without breaking something else. So no, there is no plan to fix it soon.
,
Aug 13
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by ajha@chromium.org
, Mar 26 2018