svg background images get bad aliasing when border-radius is applied
Reported by
samyalza...@gmail.com,
Feb 27 2017
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 Example URL: http://codepen.io/anon/pen/peJVpr Steps to reproduce the problem: 1. visit http://codepen.io/anon/pen/peJVpr 2. compare both icons on standard or retina screens 3. What is the expected behavior? should look identical What went wrong? the second icon which has border-radius applied loses fidelity 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: 56.0.2924.87 Channel: stable OS Version: OS X 10.12.3 Flash Version:
,
Feb 27 2017
I can reproduce on 58.0.3013.3 / Mac.
,
Feb 27 2017
I'm not seeing it on Linux M57.
,
Feb 27 2017
Note: this only repros without --enable-use-zoom-for-dsf (enabled by default on Win/Linux). Most likely a side effect of the border-radius background image fast path (drawing the image via a shader to avoid clipping). What I think is going on: SVGImage -> SkPictureImage -> SkImageShader -> drawRRect(). Skia provides both picture shader and picture image abstractions, to support wrapping of arbitrary draw content. The semantic difference is that a picture *image* is locked to its intrinsic resolution, while a picture shader will always rasterize at the native (CTM-derived) resolution. In this case we're going through a picture image, so we're locking the resolution prematurely. I think it should be straightforward to refactor the fast path as a picture shader for SVG images: SVGImage -> SkPictureShader -> drawRRect().
,
Feb 28 2017
,
Mar 16 2017
https://chromium.googlesource.com/chromium/src/+/f3470d2b864f14e076b1c891d39f7a65b5ab78b0 |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by a...@chromium.org
, Feb 27 2017