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 ?
width: 100%
to the container and/orflex:1
to thesvg
... Alternatively, put thesvg
in adiv
, making thatdiv
the flex item.