#StackBounty: #css #svg #flexbox #safari Safari does not display SVG when using flexbox to center it

Bounty: 50

I’ve got an issue with Safari, SVG, and flexbox

The goal is to have a responsive SVG, that keeps the aspect ratio (16:9). Moreover, the SVG should always sit in the vertical and horizontal center of the screen. The following code works well for all browsers except for Safari… I tried different vendor prefixes, but I have no clue why the SVG is not showing up… Any ideas?

You can test the flawed behavior in the code snippet below. Safari will show a blank page. Other browsers will show a 16:9, always centered teal rectangle.

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  background-color: teal;
  max-height: 100vh;
}
<svg viewBox="0 0 1920 1080">
</svg>

Update

Just some clarification. Depending on the aspect ratio of the viewport, the SVG is either in horizontal center or vertical center. Only when the screen aspect ratio is exactly 16:9 it matches the SVS’s viewBox (see viewBox="0 0 1920 1080"), and it would show without any borders (letterboxes). That is my goal, and solution should work in all browsers—no matter how it is done.

enter image description here


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.