Bug 219978

Summary: SVG foreignObject content (seemingly) doesn't get the transform from ancestry tree
Product: WebKit Reporter: Bogdan Brinza <bogdan.brinza>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: sabouhallawa, smoley, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Minimal reduction
none
Safari issue
none
Firefox reference
none
Safari with a scale applied to foreignObject content
none
Minimal reduction
none
Minimal reduction none

Description Bogdan Brinza 2020-12-16 23:08:08 PST
Created attachment 416393 [details]
Minimal reduction

Original site issue found on UniFi controller topology map (https://demo.ui.com/manage/site/default/maps/topology - this demo page takes forever to load in Safari btw, instant in Firefox).

Device icons are basically fixed size as you zoom and move around. There is a zoom level where they look good, every other zoom level breaks them.

I'm attaching a minimal reduction that demonstrates the issue - unifi.html and two image Safari-broken.png and Firefox-working.png (it also works in Chromium FWIW).

Looking at the minimal repro almost everything seems like a red herring, the actually important things are:

<g transform="translate(50,50) scale(0.5)"> - a node with a transform in the ancestry chain

<foreignObject width="48" height="48" x="-24" y="-24"> - foreignObject with a specified size 48x48

Observing the result in Safari and Firefox one can notice that both foreignObjects are twice as large in Safari. (Twice as large and 0.5 scale, hmmmmm :-))

To confirm this I've added another CSS rule that applies scale(0.5) directly to the foreignObject first child nodes (see xforeignObject) - if one removes "x" to make a valid rule and reloads in Safari - the rendering will be identical to Firefox.
Comment 1 Bogdan Brinza 2020-12-16 23:08:28 PST
Created attachment 416394 [details]
Safari issue
Comment 2 Bogdan Brinza 2020-12-16 23:08:41 PST
Created attachment 416395 [details]
Firefox reference
Comment 3 Bogdan Brinza 2020-12-16 23:09:10 PST
Created attachment 416396 [details]
Safari with a scale applied to foreignObject content
Comment 4 Bogdan Brinza 2020-12-16 23:44:46 PST
Created attachment 416399 [details]
Minimal reduction
Comment 5 Bogdan Brinza 2020-12-17 08:59:50 PST
Created attachment 416422 [details]
Minimal reduction

Based on my earlier notes, I've removed everything irrelevant to demonstrate the problem even more clearly
Comment 6 Smoley 2020-12-22 12:17:54 PST
Thanks for filing, I can reproduce this on Safari 13.1.3 as well as STP 117.
Comment 7 Radar WebKit Bug Importer 2020-12-22 12:18:06 PST
<rdar://problem/72596144>