Flex + svg behaving strange in ios Safari 14.0.3

user_1521976 0
Viewed 1072

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 ?

flexbox safari css
3 Answers

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.

user_15219760

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 :).

user_74401010

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

user_20989730
Related