SVG invisible on Safari without height attribute, but issue not recreatable?

Question

I have an SVG in my website which displays fine on Chrome but isn't visible on Safari and Mobile Safari.

Weirdly, if I copy and paste the SVG into a Codepen page then it works fine, so I'm not able to recreate the issue publicly.

Setting height 100% as an attribute fixes the issue in Safari and doesn't make it the wrong size or aspect ratio.

What is going on here? Why does this work and is a safe fix? And also why is the issue not reproducible?

UPDATE: Ive now been able to recreate. Safari hides the SVG when it has a parent div with display: flex:

https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/yLPgaJx

If I set the container div to display: block or set a height on the SVG then it comes back.

user_7394871 · Answer

You have the height of the SVG twice. In view styles hight="100%" and style="height: auto;"

safari doesn't know which style to prefer, how to scale the SVG, so it doesn't display the image.

Leave one style: width="22" height="auto"

Update

Try setting the values of `viewBox="0 32 448 448" according to the dimensions shown by the JS method getBBox()

And also specify fixed width and height viewport width="22" height="22"

user_7394871 · Answer

As comments @Evanss

Also height auto doens't make the SVG appear, but height 100% does.

width="22" height="100%"

The snippet above doesn't render the image correctly, but if you save the svg as a separate file and open it in a browser, you'll see exactly the same image.

In the image below, the red rectangle is the border of the svg canvas with width="22" and height="100%"

As you can see, with this SVG configuration, paddings are too large. What is unacceptable and will interfere with layout

Using JavaScript isnt idea as it may cause the page to flicker

Using the JavaScript method getBBox() in the snippet console allows you to find out the physical dimensions of the svg shape In this case, JS is not involved in the SVG rendering process and is only a reference tool.

In the console, we can see the physical dimensions (dimensions that are given by the path of the svg shape)

  "x": 0,
  "y": 31.999996185302734,
  "width": 448,
  "height": 448

To move the image to the top left corner (this is the svgs origin) we set the value viewBox="0 32 448 448"` And to reduce the margin margins we set fixed values width="22" height="22"

Recommendations for creating and using icons

Setting both dimensions would be very time consuming as I have a lot of icons with the same issue.

If you are using some unique icons created by a designer, then you cannot avoid the manual positioning and scaling process for each icon described above.

There is no universal solution for this case. It all depends on how the icon was drawn.

If the icon is simple, standard, then it is better to use icons drawn by professionals. There are many such resources on the web.
In this case, manual, additional processing is not required.
You can use google-fonts character font

Icons by name can be selected here
The name of your icon - Close `Fullscreen

Below is an example with minimal layout

span {
  margin-left: 0.5em;
  margin-top:0.5em;
  transition: transform 1s ease-in-out;
}
span:hover {
  transform: scale(2); 
  color:red;
}



 close_fullscreen

user_11097205 · Answer

In my case, adding the svg attributes width="40" and height="auto" did the trick for Safari to show the svgs correctly:

SVG invisible on Safari without height attribute, but issue not recreatable?

3 Answers

Update

Recommendations for creating and using icons