WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
Bug 194903
Transform-origin on SVG breaks when zoom in or out
https://bugs.webkit.org/show_bug.cgi?id=194903
Summary
Transform-origin on SVG breaks when zoom in or out
Kristina Kovach
Reported
2019-02-21 08:57:07 PST
In the following codepen example there is an inline SVG spinner animated with CSS. The spinner has two animated parts: <g> and <circle>. Both parts have `transform-origin: center` and `transform-box: fill-box` set. When zooming page in or out these parts are no longer rotated at their center point despite transform origin property.
Attachments
Testcase
(979 bytes, text/html)
2019-03-07 16:02 PST
,
Simon Fraser (smfr)
no flags
Details
Test with translate
(1.19 KB, text/html)
2019-03-07 16:15 PST
,
Simon Fraser (smfr)
no flags
Details
Patch
(5.75 KB, patch)
2019-03-07 18:58 PST
,
Simon Fraser (smfr)
ews-watchlist
: commit-queue-
Details
Formatted Diff
Diff
Archive of layout-test-results from ews101 for mac-highsierra
(2.58 MB, application/zip)
2019-03-07 19:40 PST
,
EWS Watchlist
no flags
Details
Archive of layout-test-results from ews107 for mac-highsierra-wk2
(2.57 MB, application/zip)
2019-03-07 19:51 PST
,
EWS Watchlist
no flags
Details
Archive of layout-test-results from ews114 for mac-highsierra
(2.34 MB, application/zip)
2019-03-07 20:36 PST
,
EWS Watchlist
no flags
Details
Archive of layout-test-results from ews126 for ios-simulator-wk2
(2.57 MB, application/zip)
2019-03-07 20:56 PST
,
EWS Watchlist
no flags
Details
Archive of layout-test-results from ews202 for win-future
(12.93 MB, application/zip)
2019-03-11 17:54 PDT
,
EWS Watchlist
no flags
Details
test case 2
(507 bytes, text/html)
2024-04-29 21:02 PDT
,
Fujii Hironori
no flags
Details
WIP patch
(2.45 KB, patch)
2024-07-22 19:09 PDT
,
Fujii Hironori
no flags
Details
Formatted Diff
Diff
Show Obsolete
(7)
View All
Add attachment
proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1
2019-02-21 17:11:36 PST
By "zoom" you mean Command-+ zooming?
Kristina Kovach
Comment 2
2019-02-23 01:25:58 PST
Yes
Simon Fraser (smfr)
Comment 3
2019-03-07 15:56:06 PST
In SVGGraphicsElement::animatedLocalTransform(), objectBoundingBox() is being affected by effectiveZoom() but transformOriginX() is not, so they are mismatched.
https://trac.webkit.org/r166967
tried to fix this but I'm not sure it's correct.
Simon Fraser (smfr)
Comment 4
2019-03-07 16:02:03 PST
Created
attachment 363945
[details]
Testcase
Simon Fraser (smfr)
Comment 5
2019-03-07 16:14:48 PST
Transforms and zoom are just broken in SVG in general. You don't need a rotate or transform-origin to have them go wrong.
Simon Fraser (smfr)
Comment 6
2019-03-07 16:15:03 PST
Created
attachment 363949
[details]
Test with translate
Simon Fraser (smfr)
Comment 7
2019-03-07 16:22:12 PST
Reverting
r166967
fixes this for me.
Simon Fraser (smfr)
Comment 8
2019-03-07 18:58:41 PST
Created
attachment 363972
[details]
Patch
EWS Watchlist
Comment 9
2019-03-07 19:40:21 PST
Comment on
attachment 363972
[details]
Patch
Attachment 363972
[details]
did not pass mac-ews (mac): Output:
https://webkit-queues.webkit.org/results/11422213
New failing tests: svg/zoom/page/transform-origin-and-zoom.html
EWS Watchlist
Comment 10
2019-03-07 19:40:26 PST
Created
attachment 363975
[details]
Archive of layout-test-results from ews101 for mac-highsierra The attached test failures were seen while running run-webkit-tests on the mac-ews. Bot: ews101 Port: mac-highsierra Platform: Mac OS X 10.13.6
EWS Watchlist
Comment 11
2019-03-07 19:51:39 PST
Comment on
attachment 363972
[details]
Patch
Attachment 363972
[details]
did not pass mac-wk2-ews (mac-wk2): Output:
https://webkit-queues.webkit.org/results/11422223
New failing tests: svg/zoom/page/transform-origin-and-zoom.html
EWS Watchlist
Comment 12
2019-03-07 19:51:41 PST
Created
attachment 363977
[details]
Archive of layout-test-results from ews107 for mac-highsierra-wk2 The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews. Bot: ews107 Port: mac-highsierra-wk2 Platform: Mac OS X 10.13.6
EWS Watchlist
Comment 13
2019-03-07 20:36:15 PST
Comment on
attachment 363972
[details]
Patch
Attachment 363972
[details]
did not pass mac-debug-ews (mac): Output:
https://webkit-queues.webkit.org/results/11422355
New failing tests: svg/zoom/page/transform-origin-and-zoom.html
EWS Watchlist
Comment 14
2019-03-07 20:36:16 PST
Created
attachment 363980
[details]
Archive of layout-test-results from ews114 for mac-highsierra The attached test failures were seen while running run-webkit-tests on the mac-debug-ews. Bot: ews114 Port: mac-highsierra Platform: Mac OS X 10.13.6
EWS Watchlist
Comment 15
2019-03-07 20:56:50 PST
Comment on
attachment 363972
[details]
Patch
Attachment 363972
[details]
did not pass ios-sim-ews (ios-simulator-wk2): Output:
https://webkit-queues.webkit.org/results/11422382
New failing tests: svg/zoom/page/transform-origin-and-zoom.html
EWS Watchlist
Comment 16
2019-03-07 20:56:52 PST
Created
attachment 363982
[details]
Archive of layout-test-results from ews126 for ios-simulator-wk2 The attached test failures were seen while running run-webkit-tests on the ios-sim-ews. Bot: ews126 Port: ios-simulator-wk2 Platform: Mac OS X 10.13.6
Said Abou-Hallawa
Comment 17
2019-03-07 22:35:04 PST
Comment on
attachment 363972
[details]
Patch View in context:
https://bugs.webkit.org/attachment.cgi?id=363972&action=review
> Source/WebCore/svg/SVGGraphicsElement.cpp:-107 > - // CSS bakes the zoom factor into lengths, including translation components. > - // In order to align CSS & SVG transforms, we need to invert this operation. > - float zoom = style->effectiveZoom(); > - if (zoom != 1) { > - matrix.setE(matrix.e() / zoom); > - matrix.setF(matrix.f() / zoom); > - } > -
I do.not think this change is correct. With this change if you open the file LayoutTests/svg/zoom/page/zoom-css-transforms.svg and you manually Command-+, the display will be wrong. I think the above if-stament should only be executed if (style->transformBox() != TransformBox::FillBox). In case of TransformBox::FillBox, boundingBox is the logical bounds of the renderer. Otherwise, boundingBox Is multiplied by the zooming factor. So we need to remove this scaling somehow from the matrix.
EWS Watchlist
Comment 18
2019-03-11 17:54:14 PDT
Comment on
attachment 363972
[details]
Patch
Attachment 363972
[details]
did not pass win-ews (win): Output:
https://webkit-queues.webkit.org/results/11463175
New failing tests: svg/zoom/page/transform-origin-and-zoom.html
EWS Watchlist
Comment 19
2019-03-11 17:54:25 PDT
Created
attachment 364322
[details]
Archive of layout-test-results from ews202 for win-future The attached test failures were seen while running run-webkit-tests on the win-ews. Bot: ews202 Port: win-future Platform: CYGWIN_NT-6.1-2.10.0-0.325-5-3-x86_64-64bit
Joseph Pecoraro
Comment 20
2019-03-15 13:34:33 PDT
***
Bug 195434
has been marked as a duplicate of this bug. ***
Simon Fraser (smfr)
Comment 21
2019-03-15 13:38:42 PDT
Someone else should be free to take this.
Joseph Pecoraro
Comment 22
2019-03-15 15:32:53 PDT
Comment on
attachment 363972
[details]
Patch View in context:
https://bugs.webkit.org/attachment.cgi?id=363972&action=review
>> Source/WebCore/svg/SVGGraphicsElement.cpp:-107 >> - > > I do.not think this change is correct. With this change if you open the file LayoutTests/svg/zoom/page/zoom-css-transforms.svg and you manually Command-+, the display will be wrong. I think the above if-stament should only be executed if (style->transformBox() != TransformBox::FillBox). In case of TransformBox::FillBox, boundingBox is the logical bounds of the renderer. Otherwise, boundingBox Is multiplied by the zooming factor. So we need to remove this scaling somehow from the matrix.
If I put this inside of an `if (style->transformBox() != TransformBox::FillBox)` block then this no longer solves duplicate 195434.
Joseph Pecoraro
Comment 23
2019-03-15 15:34:51 PDT
Comment on
attachment 363972
[details]
Patch View in context:
https://bugs.webkit.org/attachment.cgi?id=363972&action=review
> LayoutTests/ChangeLog:8 > + Test still needs some work to avoid antialiasing diffs.
To avoid antialiasing diffs you could use SVG transforms: <!DOCTYPE html> <html> <head> <style> body { margin: 0; } rect { transform-box: view-box; } </style> <script> function doTest() { const zoomCount = 2; for (let i = 0; i < zoomCount; ++i) eventSender.zoomPageIn(); } window.addEventListener('load', doTest, false); </script> </head> <body> <svg width="500" height="400" viewBox="0 0 500 400" xmlns="
http://www.w3.org/2000/svg
"> <rect x="50" y="50" width="80" height="80" fill="gray"/> <rect x="50" y="50" width="80" height="80" fill="green" transform="rotate(90 130 130)"/> <rect x="250" y="100" width="80" height="80" fill="gray"/> <rect x="210" y="60" width="120" height="120" fill="green" transform="rotate(90 330 180)"/> <rect x="50" y="250" width="80" height="80" fill="gray"/> <rect x="50" y="250" width="80" height="80" fill="green" transform="translate(80 0)"/> </svg> </body> </html> But I'm not sure if this will be a great test then, because we'd like to compare to CSS transforms.
Radar WebKit Bug Importer
Comment 24
2022-07-01 15:44:47 PDT
<
rdar://problem/96318505
>
Simon Fraser (smfr)
Comment 25
2023-08-21 10:36:47 PDT
***
Bug 258615
has been marked as a duplicate of this bug. ***
Karl Dubost
Comment 26
2023-10-24 14:03:37 PDT
***
Bug 263219
has been marked as a duplicate of this bug. ***
Fujii Hironori
Comment 27
2024-04-29 18:30:59 PDT
***
Bug 273307
has been marked as a duplicate of this bug. ***
Fujii Hironori
Comment 28
2024-04-29 21:02:01 PDT
Created
attachment 471211
[details]
test case 2
Fujii Hironori
Comment 29
2024-07-22 19:09:46 PDT
Created
attachment 471940
[details]
WIP patch
Fujii Hironori
Comment 30
2024-07-22 21:26:46 PDT
Pull request:
https://github.com/WebKit/WebKit/pull/31095
EWS
Comment 31
2024-07-23 17:34:50 PDT
Committed
281265@main
(c78d507eeee2): <
https://commits.webkit.org/281265@main
> Reviewed commits have been landed. Closing PR #31095 and removing active labels.
Ahmad Saleem
Comment 32
2024-08-23 17:30:54 PDT
***
Bug 218300
has been marked as a duplicate of this bug. ***
Fujii Hironori
Comment 33
2024-09-16 16:47:41 PDT
***
Bug 133150
has been marked as a duplicate of this bug. ***
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug