Bug 270317 - [LegacySVG] SVG foreignobject could not be transformed
Summary: [LegacySVG] SVG foreignobject could not be transformed
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Apple Silicon) macOS 14
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2024-02-29 13:36 PST by jogibear9988
Modified: 2024-03-14 02:35 PDT (History)
6 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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