Bug 194903

Summary: Transform-origin on SVG breaks when zoom in or out
Product: WebKit Reporter: Kristina Kovach <goncharenkokn>
Component: SVGAssignee: Fujii Hironori <fujii.hironori>
Status: RESOLVED FIXED    
Severity: Normal CC: ahmad.saleem792, bfulgham, dino, ews-watchlist, fotis.papadogeorgopoulos, fujii.hironori, joepeck, krit, mauriceconrad, rniwa, sabouhallawa, simon.fraser, thorton, webkit-bug-importer, zalan, zbbjornson, zimmermann
Priority: P2 Keywords: InRadar, LayerBasedSVGEngine
Version: Safari 12   
Hardware: Mac   
OS: macOS 10.13   
URL: https://codepen.io/isimyi/pen/QYxZgm
See Also: https://bugs.webkit.org/show_bug.cgi?id=258615
https://bugs.webkit.org/show_bug.cgi?id=275621
https://bugs.webkit.org/show_bug.cgi?id=125836
Attachments:
Description Flags
Testcase
none
Test with translate
none
Patch
ews-watchlist: commit-queue-
Archive of layout-test-results from ews101 for mac-highsierra
none
Archive of layout-test-results from ews107 for mac-highsierra-wk2
none
Archive of layout-test-results from ews114 for mac-highsierra
none
Archive of layout-test-results from ews126 for ios-simulator-wk2
none
Archive of layout-test-results from ews202 for win-future
none
test case 2
none
WIP patch none

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-
DetailsFormatted DiffDiff
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
DetailsFormatted DiffDiff
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.