New issue
Advanced search Search tips

Issue 643623 link

Starred by 5 users

Issue metadata

Status: Duplicate
Merged: issue 485650
Owner:
Closed: Sep 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug-Regression



Sign in to add a comment

SVG background image not rendering correctly with border-radius

Reported by maximelo...@gmail.com, Sep 2 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 Safari/537.36

Example URL:
http://codepen.io/anon/pen/vXYpAL

Steps to reproduce the problem:
1. Open the CodePen in Chrome 53
2. You should see a difference in rendering between the two icons
3. If you open the CodePen in Chrome 52 or lower, the two icons are rendered the same

What is the expected behavior?
The icon should be rendered correctly even if we use border-radius.

What went wrong?
Rendering issue, see the screenshot representing Chromium 51.0.2683.0 on the left and Chrome 53.0.2785.89 on the right.

I couldn't find a build of Chrome 52 stable to test it, but I am pretty sure this worked.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? Yes In the previous version, Chrome stable 52.x

Does this work in other browsers? Yes 

Chrome version: 53.0.2785.89  Channel: stable
OS Version: OS X 10.11.5
Flash Version: Shockwave Flash 22.0 r0
 
Screen Shot 2016-09-02 at 11.11.14.png
49.1 KB View Download
I just tested in Chrome Canary 55.0.2847.0 canary (64-bit).
The rendering is different, but still not perfect. The icon is blurry when using border-radius.


Screen Shot 2016-09-02 at 11.20.16.png
22.3 KB View Download

Comment 2 by f...@opera.com, Sep 2 2016

Components: Blink>SVG Blink>Paint
Labels: -Type-Compat -OS-Mac Type-Bug-Regression
Owner: fmalita@chromium.org
Status: Assigned (was: Unconfirmed)
Thanks for a great report!

This appeared to have regressed in:

https://chromium.googlesource.com/chromium/src/+log/91d01ad36f9147b5c089441b158d1e669086a1e9..7cccff82452a808d3262ca32a3f7657d0b77e051

Most likely 4c1400381d16b6dcd8921a8f19a2ae9af4aac4cf.
And then fixed again (excepting the issue with blurriness) in:

https://chromium.googlesource.com/chromium/src/+log/605ab1c3447ebe4749d80c20a7d38c01a59c0887..8148eedf1595dab9ec126e3e20403bad53021db9

Most likely 8148eedf1595dab9ec126e3e20403bad53021db9.

So the non-blurry part of the bug is a dupe of  issue 632969 .

The issue with the image being blurry appears to be a HiDPI issue, so I'm assuming that you device is one of those. That issue seems have been around since the issue regressed initially though. I suspect the zoom-factor is not factored in in SVGImageForContainer (where it is stored but not passed to imageForCurrentFrameForContainer.)

Assigning to fmalita for now.
Thanks for investigating, that sounds about right.

There is indeed a problem with zoom handling (we ignore m_zoom from SVGImageForContainer), but unfortunately DSF is not included in it.  So fixing zoom is not going to make the image sharp.

We could either try to plumb DSF info (ugh), or wait a bit for --enable-use-zoom-for-dsf to be turned on by default (it's only enabled on CrOS at the moment IINM).

I'd vote for the latter + look into fixing the zoom behavior.
Project Member

Comment 4 by bugdroid1@chromium.org, Sep 9 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/8e62373579cf6eddb6723e7e8e39306cde20c934

commit 8e62373579cf6eddb6723e7e8e39306cde20c934
Author: fmalita <fmalita@chromium.org>
Date: Fri Sep 09 04:33:09 2016

SVGImageForContainer::imageForCurrentFrame() needs to account for zoom

SVGImageForContainer tracks a container zoom factor independently of
the actual container size.  This zoom factor needs to be accounted for
in imageForCurrentFrame() -- otherwise we end up producing an SkImage
with a different size than reported by SVGImageForContainer::size().

The easiest way to accomplish this is to use size() when calling
SVGImage::imageForCurrentFrameForContainer(), instead of the unzoomed
m_containerSize.

BUG= 643623 
R=fs@opera.com,davve@opera.com

Review-Url: https://codereview.chromium.org/2323853002
Cr-Commit-Position: refs/heads/master@{#417504}

[modify] https://crrev.com/8e62373579cf6eddb6723e7e8e39306cde20c934/third_party/WebKit/LayoutTests/TestExpectations
[add] https://crrev.com/8e62373579cf6eddb6723e7e8e39306cde20c934/third_party/WebKit/LayoutTests/fast/backgrounds/background-svg-scaling-zoom-expected.png
[add] https://crrev.com/8e62373579cf6eddb6723e7e8e39306cde20c934/third_party/WebKit/LayoutTests/fast/backgrounds/background-svg-scaling-zoom-expected.txt
[add] https://crrev.com/8e62373579cf6eddb6723e7e8e39306cde20c934/third_party/WebKit/LayoutTests/fast/backgrounds/background-svg-scaling-zoom.html
[modify] https://crrev.com/8e62373579cf6eddb6723e7e8e39306cde20c934/third_party/WebKit/Source/core/svg/graphics/SVGImage.cpp
[modify] https://crrev.com/8e62373579cf6eddb6723e7e8e39306cde20c934/third_party/WebKit/Source/core/svg/graphics/SVGImage.h
[modify] https://crrev.com/8e62373579cf6eddb6723e7e8e39306cde20c934/third_party/WebKit/Source/core/svg/graphics/SVGImageForContainer.cpp

Mergedinto: 485650
Status: Duplicate (was: Assigned)
Zooming should be fixed now.

The remaining HiDPI issue is going to be addressed by --enable-use-zoom-for-dsf (already turned on by default on ChromeOS and Win, soon to be enabled for Mac/Android/Linux).
Cc: fmalita@chromium.org
 Issue 645925  has been merged into this issue.
Workaround to fix the HiDPI blurriness issue if you do not want to remove the border-radius: Give the element a background-color ("background-color: inherit" works for me). Maybe that helps someone.

Sign in to add a comment