Bug 255929

Summary:	Grid layout affects SVG rendering
Product:	WebKit	Reporter:	romain
Component:	CSS	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED INVALID
Severity:	Normal
Priority:	P2
Version:	Safari 16
Hardware:	Mac (Apple Silicon)
OS:	macOS 13

Description romain 2023-04-25 09:25:51 PDT

Using SVG's in a grid layout seems to alter the size of SVG sub elements.
I expect all squares in this reproduction to have the same size.

In other browsers they do have the same size, in Safari/Webkit they do not.

reproduction : 

- https://github.com/romainmenke/safari-svg-display-grid-bug-0001
- https://romainmenke.github.io/safari-svg-display-grid-bug-0001/

Comment 1 romain 2023-04-25 13:44:39 PDT

Correction, this does not seem related to display grid.
This issue can be closed.

Comment 2 Sam Sneddon [:gsnedders] 2023-04-26 04:17:00 PDT

(In reply to romain from comment #1)
> Correction, this does not seem related to display grid.
> This issue can be closed.

What do you believe this to be related to? At least for me https://romainmenke.github.io/safari-svg-display-grid-bug-0001/ looks the same across STP, Firefox Nightly, and Chrome Canary.

Comment 3 romain 2023-04-26 09:06:45 PDT

I initially came to the conclusion that this was related to grid, but I was fiddling with both the DOM structure and CSS properties simultaneously. 

I've updated the reproduction with new info : https://github.com/romainmenke/safari-svg-display-grid-bug-0001/blob/main/README.md

I found that simply adding plain text before an SVG is sufficient to give child rect elements an incorrect size.

I haven't tested with other types of child elements like a circle or paths.

----

Do you prefer that I file a new report, now that I better understand the issue?
Personally I think that would be clearer than altering this report.

Comment 4 Sam Sneddon [:gsnedders] 2023-04-26 10:05:41 PDT

> Do you prefer that I file a new report, now that I better understand the issue?

That seems reasonable, I think?