Bug 270317

Summary: [LegacySVG] SVG foreignobject could not be transformed
Product: WebKit Reporter: jogibear9988 <jochen.kuehner>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, karlcow, rbuis, sabouhallawa, webkit-bug-importer, zimmermann
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari Technology Preview   
Hardware: Mac (Apple Silicon)   
OS: macOS 14   
See Also: https://bugs.webkit.org/show_bug.cgi?id=23113
https://bugs.webkit.org/show_bug.cgi?id=174903
Attachments:
Description Flags
testcase
none
rendering in safari, firefox, chrome
none
rendering in minibrowser
none
rendering in minibrowser with 'Layer-based SVG Engine' flag none

jogibear9988
Reported 2024-02-29 13:36:10 PST
I've HTML Code like this: <foreignObject overlay-source="ElementDragTitleExtension" x="156.795403" y="163.363963" width="60" height="15" class="svg-text-primary" style="font-size: 10px; transform-box: fill-box; rotate: -45deg;"><span style="width: 100%; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">button</span></foreignObject> But the Span is not rotated. In Chrome and Firefox it is drawn rotated
Attachments
testcase (788 bytes, text/html)
2024-03-05 21:07 PST, Karl Dubost 		no flags
Details
rendering in safari, firefox, chrome (333.17 KB, image/png)
2024-03-05 21:09 PST, Karl Dubost 		no flags
Details
rendering in minibrowser (295.85 KB, image/png)
2024-03-06 16:29 PST, Karl Dubost 		no flags
Details
rendering in minibrowser with 'Layer-based SVG Engine' flag (293.53 KB, image/png)
2024-03-06 16:55 PST, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
jogibear9988
Comment 1 2024-02-29 14:08:48 PST
Better sample: <svg> <foreignObject x="179.795403" y="128.363963" width="60" height="35" style="font-size:10px;transform-box:fill-box;rotate:-45deg;"> <span style="width:100%;position:absolute;">button</span> </foreignObject> </svg> works in chrome and firefox, but does not rotate in safari
Karl Dubost
Comment 2 2024-03-05 21:07:37 PST
Created attachment 470195 [details] testcase I see two different issues in there. * button 1 is at a different place in Safari vs Firefox/Chrome * button 2 with a position: absolute completely lose the rotation and position in Safari
Karl Dubost
Comment 3 2024-03-05 21:09:02 PST
Created attachment 470196 [details] rendering in safari, firefox, chrome tested in Safari Technology Preview 189 19619.1.3.2 Firefox Nightly 125.0a1 12524.3.5 Google Chrome Canary 124.0.6338.0 6338.0
Radar WebKit Bug Importer
Comment 4 2024-03-05 21:09:28 PST
<rdar://problem/124116904>
Karl Dubost
Comment 5 2024-03-05 21:11:45 PST
The first issue seems to be a duplicate of Bug 23113
Karl Dubost
Comment 6 2024-03-05 21:14:50 PST
The second issue looks very similar to Bug 174903
Ahmad Saleem
Comment 7 2024-03-06 05:17:56 PST
NOTE - WebKit ToT (275735@main) - Minibrowser with Layer Based SVG Engine make attached test case match with other browsers.
Karl Dubost
Comment 8 2024-03-06 16:29:35 PST
Created attachment 470216 [details] rendering in minibrowser Ahmad, I still see the same issue with mini browser. compiled with https://commits.webkit.org/275765@main
Ahmad Saleem
Comment 9 2024-03-06 16:32:08 PST
(In reply to Karl Dubost from comment #8) > Created attachment 470216 [details] > rendering in minibrowser > > Ahmad, I still see the same issue with mini browser. > compiled with https://commits.webkit.org/275765@main Have you turned on 'Layer-based SVG Engine' flag from Settings > Internal Features - I am referring to that this bug is fixed already in LBSE.
Karl Dubost
Comment 10 2024-03-06 16:54:12 PST
Ooooh you are right. I missed that part. Cool!
Karl Dubost
Comment 11 2024-03-06 16:55:15 PST
Created attachment 470217 [details] rendering in minibrowser with 'Layer-based SVG Engine' flag
Note You need to log in before you can comment on or make changes to this bug.