7

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 ?

6
  • 6
    Try adding width: 100% to the container and/or flex:1 to the svg... Alternatively, put the svg in a div, making that div the flex item. Mar 8, 2021 at 19:26
  • Did you ever solve this @que1326? Feb 11, 2022 at 2:13
  • 1
    @JamesNisbet yes, in my case I had id collision ( check the below accepted answer )
    – que1326
    Feb 14, 2022 at 11:21
  • My solution ended up being something to do with minimum heights/widths + flexbox + svg child element... in Safari only. Fun times! Mar 7, 2022 at 0:36
  • Lost two hours to this today. Did you find a reliable fix?
    – Drew
    Sep 6, 2022 at 21:50

3 Answers 3

3

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

1
  • Thank you so much for this! Confirmed it works now on iOS. Both flex and inline-flex (as well as browser prefixed versions) made the SVG fail to render on every iOS browser and took a lot of searching before finding this.
    – Justin
    Mar 13 at 21:24
2

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.