Issue 174910 in chromium: on svg content -webkit-transform: translate(XXXpx, YYYpx); works wrong combining with css zoom while svg attribute transform="translate(XXX YYY)" works fine

319 views
Skip to first unread message

chro...@googlecode.com

unread,
Feb 7, 2013, 10:43:06 AM2/7/13
to chromi...@chromium.org
Status: Unconfirmed
Owner: ----
Labels: Type-Bug Pri-2 Area-Undefined OS-Windows

New issue 174910 by IO.Bak...@gmail.com: on svg content -webkit-transform:
translate(XXXpx, YYYpx); works wrong combining with css zoom while svg
attribute transform="translate(XXX YYY)" works fine
http://code.google.com/p/chromium/issues/detail?id=174910

Chrome Version : 24.0.1312.57
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
URLs (if applicable) :
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
Safari 5:
Firefox 4.x:
IE 7/8/9:

What steps will reproduce the problem?
1. open svg_css_transform_bug.html file from attachments below
2. click "zoom: 1.5" button
3. see four bars instead of three (fourth bar position became different
then third bar position, hoverer they mast be the same)

What is the expected result?
three bars should be visible, forth bar mast be always at the same position
as third bar ;
style="-webkit-transform: translate(98px, 8px);" and
transform="translate(98 8)"
should produce identical positioning in any zoom level (not just when
zoom=1.0)

What happens instead of that?
zoom applied twice in case of "-webkit-transform: translate(98px, 8px);"
It can be easily see from .getCTM() method results.
For transform="translate(98 8)" it rapports
{"f":8,"e":98,"d":1,"c":0,"b":0,"a":1}
at any zoom level
For style="-webkit-transform: translate(98px, 8px);"
it rapports
{"f":8,"e":98,"d":1,"c":0,"b":0,"a":1}
only when zoom = 1.0,
{"f":4,"e":49,"d":1,"c":0,"b":0,"a":1}
for zoom = 0.5, etc


Please provide any additional information below. Attach a screenshot if
possible.

when animation (-webkit-transition) applied to css property
-webkit-transform you can see this affect by just using ctrl+mouse_wheel
browser zooming, and notice unexpected animation of svg content that was
positioned with -webkit-transform css property (just click "apply transform
transition" button in attached svg_css_transform_bug.html file, and then
use browser zooming)


UserAgentString: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.17
(KHTML, like Gecko) Chrome/24.0.1312.57 Safari/537.17


Attachments:
svg_css_transform_bug.html 3.8 KB

chro...@googlecode.com

unread,
Feb 8, 2013, 12:28:01 AM2/8/13
to chromi...@chromium.org
Updates:
Labels: -Area-Undefined Area-WebKit WebKit-SVG

Comment #1 on issue 174910 by tk...@chromium.org: on svg content
-webkit-transform: translate(XXXpx, YYYpx); works wrong combining with css
zoom while svg attribute transform="translate(XXX YYY)" works fine
http://code.google.com/p/chromium/issues/detail?id=174910

(No comment was entered for this change.)

chro...@googlecode.com

unread,
Feb 15, 2013, 10:24:52 PM2/15/13
to chromi...@chromium.org
Updates:
Status: Assigned
Owner: p...@chromium.org

Comment #2 on issue 174910 by p...@chromium.org: on svg content
-webkit-transform: translate(XXXpx, YYYpx); works wrong combining with css
zoom while svg attribute transform="translate(XXX YYY)" works fine
http://code.google.com/p/chromium/issues/detail?id=174910

(No comment was entered for this change.)

--
You received this message because this project is configured to send all
issue notifications to this address.
You may adjust your notification preferences at:
https://code.google.com/hosting/settings

chro...@googlecode.com

unread,
Oct 18, 2013, 7:07:06 PM10/18/13
to chromi...@chromium.org
Updates:
Owner: ---
Cc: p...@chromium.org

Comment #7 on issue 174910 by p...@chromium.org: on svg content
-webkit-transform: translate(XXXpx, YYYpx); works wrong combining with css
zoom while svg attribute transform="translate(XXX YYY)" works fine
http://code.google.com/p/chromium/issues/detail?id=174910

Removing myself as the owner, as I'm not actively working on this right
now. I am more than happy to review changes in this area though.

chro...@googlecode.com

unread,
Oct 18, 2013, 9:17:48 PM10/18/13
to chromi...@chromium.org
Updates:
Owner: fma...@chromium.org

Comment #8 on issue 174910 by fma...@chromium.org: on svg content
-webkit-transform: translate(XXXpx, YYYpx); works wrong combining with css
zoom while svg attribute transform="translate(XXX YYY)" works fine
http://code.google.com/p/chromium/issues/detail?id=174910

Yup, for SVG we apply the zoom factor at the SVG root level, but it is also
included in CSS transform values -> double zoom. We'll need to compensate...

chro...@googlecode.com

unread,
Oct 25, 2013, 2:34:03 AM10/25/13
to chromi...@chromium.org

Comment #9 on issue 174910 by bugdro...@chromium.org: on svg content
-webkit-transform: translate(XXXpx, YYYpx); works wrong combining with css
zoom while svg attribute transform="translate(XXX YYY)" works fine
http://code.google.com/p/chromium/issues/detail?id=174910#c9

The following revision refers to this bug:
http://src.chromium.org/viewvc/blink?view=rev&rev=160546

------------------------------------------------------------------------
r160546 | fma...@chromium.org | 2013-10-25T05:48:38.713342Z

Changed paths:
A
http://src.chromium.org/viewvc/blink/trunk/LayoutTests/svg/zoom/page/zoom-css-transforms-expected.svg?r1=160546&r2=160545&pathrev=160546
M
http://src.chromium.org/viewvc/blink/trunk/Source/core/svg/SVGGraphicsElement.cpp?r1=160546&r2=160545&pathrev=160546
A
http://src.chromium.org/viewvc/blink/trunk/LayoutTests/svg/zoom/page/zoom-css-transforms.svg?r1=160546&r2=160545&pathrev=160546

[SVG] Fix CSS transform handling when zoomed.

CSS takes the page zoom factor into account for all computed length
values, including transform translation components.

OTOH, SVG applies the zoom factor globally (at the SVG root level) -
so when using CSS transforms in SVG, the translation components are
scaled twice.

This CL adjusts CSS transforms when used in SVG to account for
the unexpected translation scale.

BUG=174910
R=p...@chromium.org,sche...@chromium.org

Review URL: https://codereview.chromium.org/40293002
------------------------------------------------------------------------

chro...@googlecode.com

unread,
Oct 25, 2013, 9:25:28 AM10/25/13
to chromi...@chromium.org
Updates:
Status: Fixed

Comment #10 on issue 174910 by fma...@chromium.org: on svg content
-webkit-transform: translate(XXXpx, YYYpx); works wrong combining with css
zoom while svg attribute transform="translate(XXX YYY)" works fine
http://code.google.com/p/chromium/issues/detail?id=174910

(No comment was entered for this change.)

Reply all
Reply to author
Forward
0 new messages