SVG feTile creates wrong result in some browser zoom levels
Reported by
jan.boes...@incors.com,
Jan 30 2018
|
||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.119 Safari/537.36 Example URL: https://codepen.io/anon/pen/bLGmjr Steps to reproduce the problem: Visit https://codepen.io/anon/pen/bLGmjr or run the attached code. What is the expected behavior? The rectangle should be seamlessly filled with red color, independent from the browser's zoom level. What went wrong? If the browser's zoom level is set to 50% or 25%, The rectangle will be displayed as a raster of small squares. Interestingly if you change the tile size (in feComponentTransfer) to 12x12 pixels, the problem occurs at zoom level 33%. If you set it to 20x20 pixels, the problem does not occur at all. Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 64.0.3282.119 Channel: stable OS Version: 6.1 (Windows 7, Windows Server 2008 R2) Flash Version: Works correctly on Firefox and Internet Explorer
,
Jan 30 2018
,
Jan 30 2018
I can't reproduce this in a chromium bisect, though it does reproduce in Chrome. What happens if you disable GPU rasterization?
,
Jan 30 2018
It is a GPU raster issue. Bisect says: https://chromium.googlesource.com/chromium/src/+log/8aa1a1715765e192313f677a35fbd8618e6491eb..0aa10a8d01e118db52d355ddaee261fbb5c8ed11 The only likely candidate is https://chromium-review.googlesource.com/c/chromium/src/+/744683: Reenable Skia's deferred proxies Evidence suggests some rounding issue combined with power-of-2.
,
Jan 30 2018
Problem disappears after switching off hardware acceleration.
,
Jan 30 2018
Thanks for confirming that it's a GPU raster bug.
,
Feb 5 2018
Adding Florin, who might know what is up with the image filters.
,
Feb 5 2018
,
Nov 3
Just wanted to give an update why I hope this will be fixed. When filtering a large rectangle in SVG sometimes it is much faster to filter a small area first and then use feTile to fill a larger area with the result. This can improve rendering of SVGs quite a bit. Due to the artefacts in some zoom levels, feTile is mostly unusable on Chrome, which again makes it unusable for SVGs on websites. In short, fixing this issue would make is possible to use the performance potentials provided by feTile.
,
Dec 12
AFAICT this has been fixed. OP, could you verify?
,
Dec 13
It has improved a lot, but unfortunately I can still find cases where the artefacts occur. If I open the following codepen and zoom to 110%, the rectangle shows a grid: https://codepen.io/anon/pen/jXbdbN Interestingly, If I zoom in further (to 150%) and then zoom back to 110%, the rectangle is painted correctly (without a grid). Only after reloading the page the grid shows again. |
||||||||||
►
Sign in to add a comment |
||||||||||
Comment 1 by krajshree@chromium.org
, Jan 30 2018