SVG paths with shape-rendering: crispEdges & stroke-width: 0 are invisible on High density displays (like ones in a MacBook Pro Retina)
Reported by
m.go...@gmail.com,
Mar 2 2016
|
||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36 Example URL: https://jsfiddle.net/m_gol/sk81z7jr/1/ Steps to reproduce the problem: 1. Open https://jsfiddle.net/m_gol/sk81z7jr/1/ 2. 3. What is the expected behavior? You should see a black bar. What went wrong? Nothing displays. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 51.0.2665.0 Channel: canary OS Version: OS X 10.11.3 Flash Version: Shockwave Flash 20.0 r0 This is affecting charts on a YouGov site at https://yougov.co.uk/opi/browse/David_Cameron. To see the bug, scroll down to "Volume over time" and click "2 years"; the bars disappear. If you move the Chrome window to the external non-Retina screen, the chart appears. If you move it back to the integrated display, it disappears again. I tested Safari 9.0 & Firefox 44 and it works fine in both of them.
,
Mar 2 2016
,
Mar 2 2016
What's being observed here is essentially an effect of aliasing - by shifting the line slightly to the left (40.5 -> 40.45 for instance) it'll show up. The cause is 'shape-rendering: crispEdges', which will cause antialiasing to be disabled for the shape, and the rasterizer does not put any sample points within the shape.
Don't know exactly how Skia picks the samples here, but Safari and Firefox obviously does it differently.
('stroke-width: 0' should have no effect on this, and doesn't seem to AFAICS.)
,
Mar 2 2016
,
Mar 2 2016
+Cary, +Florin
,
Mar 3 2016
Able to repro this issue only on MAC Retina Display [10.11.3] for Google Chrome Canary Version - 51.0.2665.0 This is a Non-Regression issue existing from M24 # - 24.0.1300.0 Note: Issue not observed on Windows, MAC Pro & Air and Ubuntu Trusty OS.
,
Mar 3 2016
I saw this on my HiDPI Linux machine, so it's definitely not Mac-only. (Presumably also repros on a Win HiDPI, but I don't have one of those around to verify.)
,
Mar 3 2016
Note that this fiddle does not draw a stroke. It draws a filled shape. This is why the stroke-width does not make a difference. It is consistent with Skia's architecture that this shape doesn't draw. If an aliased fill does not enclose a pixel center, the pixel center is not turned on. If I change the original fiddle's translate to have an x-offset of 40.75 instead of 40.5, the figure disappears. There's nothing particular to the Retina or Hi DPI about this -- those just have doubled device coordinates. Maybe this is just a mistake/misunderstanding made by the content's author?
,
Mar 3 2016
I see. Why do the shapes appear in other browsers then, though? Shouldn't this behavior be specced to be consistent between various browsers?
,
Mar 3 2016
For reference, the chart on https://yougov.co.uk/opi/browse/David_Cameron is not created by hand but generated by the C3.js plugin for D3 (http://c3js.org/). This library seems to be quite popular (see the download stats at https://www.npmjs.com/package/c3) so it might affect other sites as well.
,
Mar 7 2016
If this library is still actively under development, then perhaps it would be best to file a bug there. I don't know how other browsers implement their aliased fills -- whether adjustments are made in the geometry or in the rendering of that geometry -- but it's not something that's easy to change. Any addition to cause this to draw would have undesirable side effects. |
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by m.go...@gmail.com
, Mar 2 2016