Bug 255997

Created attachment 466103 [details]
A screen recording of the SVG being rotated, illustrating that the rect child element isn't fully square.

I've noticed that SVG child elements render inconsistently depending on some surrounding factors.
I've tried to illustrate this in a reproduction :

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

This document renders correctly in all browsers :
https://romainmenke.github.io/safari-svg-display-grid-bug-0001/svg-without-text.html

The SVG element is 16px by 16px and the rect child element also is 16px by 16px.

This document however renders differently in Safari : 
https://romainmenke.github.io/safari-svg-display-grid-bug-0001/svg-after-text.html

The SVG element is 16px by 16px BUT the rect child element is now 17px by 16px.
Even worse, when rotating the element the side that isn't correctly sized seems to shift.

I've added a hover transition to rotate the element.
A screen recording of the shift can be found here : https://github.com/romainmenke/safari-svg-display-grid-bug-0001
I've also attached that screen recording here.

The only difference between these documents is that one has some plain text before the SVG.
There are multiple ways to trigger this state, but this was the most simple reproduction.