New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 676376 link

Starred by 4 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , All , Chrome , Mac
Pri: 2
Type: Bug



Sign in to add a comment

SVG sprite resizing issue at various zoom levels

Reported by i...@savvycard.com, Dec 21 2016

Issue description

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

Example URL:
https://www.savvycard.com/david/savvycard

Steps to reproduce the problem:
1. Go to URL (https://www.savvycard.com/david/savvycard) at 100% zoom and notice positioning of SVG buttons on the page
2. Increase zoom to 110%
3. Notice button positioning is off

This can also be reproduced on other sites. Here's another example:
* https://24ways.org/2016/designing-imaginative-style-guides

Most screens render this as an issue at 110% zoom, but one user in our office has been unable to reproduce. We think this relates to the pixel density of his screen, as it is a high-resolution monitor.

What is the expected behavior?
SVG images should scale in size to the corresponding zoom levels.

What went wrong?
Images in the SVG sprite do not scale correctly based on the zoom level, and shows slightly off. Please reference the attached screenshots for a visual representation of the issue.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? Yes 

Does this work in other browsers? Yes

Chrome version: 54.0.2840.98  Channel: n/a
OS Version: OS X 10.11.3
Flash Version: Shockwave Flash 24.0 r0

It appears that this was fixed previously in this bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=582417
 
svg-issue.jpg
106 KB View Download
svg-issue2.jpg
91.6 KB View Download

Comment 1 Deleted

It appears that this was fixed previously in this bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=66498

But still having issue.
Labels: Needs-Milestone Needs-Bisect
Adding 'Needs-Milestone' label, TE will check the issue and update the bug with comments & tag with respective Mstone
Cc: sureshkumari@chromium.org
Labels: -Needs-Bisect -Needs-Milestone M-57 OS-Linux OS-Windows
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue on windows-7, Mac-10.12.2 and Linux Ubuntu-14.04 using chrome stable version 55.0.2883.87 and latest canary 57.0.2958.3 with the steps mentioned above.
This is non-regression issue observed from M-30 # 30.0.1599.0. Hence marking it as Untriaged to get it addressed.
Please find the attached screencast.

Thanks..
676376.mp4
873 KB View Download

Comment 5 by bokan@chromium.org, Dec 22 2016

Components: -Blink UI>Browser>Zoom Blink>SVG

Comment 6 by f...@opera.com, Dec 22 2016

Cc: schenney@chromium.org
schenney, is this a dupe of  issue 594481 ?
Components: -UI>Browser>Zoom
Labels: -OS-Linux -OS-Windows -OS-Mac OS-All
Owner: schenney@chromium.org
Status: Available (was: Untriaged)
It might be the same as 594481 but it's much worse, maybe due to SVG viewport scaling issues or something.

But it looks more to me like we are scaling the image size but not the offset under zoom. That would be a different bug.
Interestingly, it's only broken at 110% on my MacBook, and we are drawing the box shadow in the right place.

Comment 9 by rec...@gmail.com, Dec 13 2017

Another example of bad zooming behaviour when svg is used as background-image:
http://syntax.dualsoul.net/tmp/svg-chrome/

Labels: OS-Android OS-Chrome OS-Linux OS-Mac OS-Windows
Status: Assigned (was: Available)
I'm on this right now, so thanks and I'll add this to the list of issues to investigate.
Labels: Hotlist-Background-Painting

Sign in to add a comment