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

Description jogibear9988 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
Comment 1 jogibear9988 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
Comment 2 Karl Dubost 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
Comment 3 Karl Dubost 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
Comment 4 Radar WebKit Bug Importer 2024-03-05 21:09:28 PST 
<rdar://problem/124116904>
Comment 5 Karl Dubost 2024-03-05 21:11:45 PST 
The first issue seems to be a duplicate of Bug 23113
Comment 6 Karl Dubost 2024-03-05 21:14:50 PST 
The second issue looks very similar to Bug 174903
Comment 7 Ahmad Saleem 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.
Comment 8 Karl Dubost 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
Comment 9 Ahmad Saleem 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.
Comment 10 Karl Dubost 2024-03-06 16:54:12 PST 
Ooooh you are right. I missed that part. Cool!
Comment 11 Karl Dubost 2024-03-06 16:55:15 PST 
Created attachment 470217 [details]
rendering in minibrowser with 'Layer-based SVG Engine' flag