Flex + svg behaving strange in ios Safari 14.0.3

Question

So I have this simple markup:

<div class="container">
  <svg>...</svg>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

On Chrome everything is working as expected - the svg is centered in the.container class

On Safari 14.0.3 , the svg is not being rendered by the browser, if I open the inspector and toggle the property display: flex off and then back on, it's showing up and works as expected.

What fallback would you use in this situation?

Answer 1

In my case the container element was a button with fixed height and width of 32px. What worked for me - adding padding to 0 for it - it had some padding from user agent stylesheet, which covered to whole inside. It shouldn't hid the svg though (only iOS mobiles), but it did:).

Answer 2

Giving the svg a width and height of 100% fixed it for me.

Answer 3

Check that the SVG reference ids don't collide with other svgs ids. Safari it's behaving strange when you are using the same ids to reference, from svg definition. Chrome on the other hand doesn't care if you use the same id in different svgs.