Flexbox centrage sur Safari

Le code suivant centres une vidéo verticalement et horizontalement dans google Chrome, et la plupart des navigateurs modernes, sauf pour Safari où il est juste centré verticalement:

<!DOCTYPE html>
<html lang="en">  
<head>    
<meta charset="utf-8">    
<meta http-equiv="X-UA-Compatible" content="IE=edge">    
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->    
<meta name="description" content="">    
<meta name="author" content="">    
<link rel="icon" href="favicon.ico">    
<title>Rick
</title>    
<!-- Bootstrap core CSS -->    
<!-- from bootstrap 4 -->
<style type="text/css">
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #373a3c;
background-color: #fff;
}
body {
margin: 0;
}
.container {
margin-right: auto;
margin-left: auto;
}
</style>
<!-- site custom styles -->
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0px;
overflow: hidden;
}
.content {
flex: 1 0 auto;
justify-content: center;
align-content: center;
display: flex;
flex-direction: column;
border: 10px solid pink;
}
.video-container {
height: 100%;
display: flex;
flex: 1 0 auto;
flex-direction: column;
justify-content: center;
align-content: center;
}
</style> 
</head>  
<body>  
<!-- Begin page content -->    
<div class="content container">      
<div class="video-container">                        
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&controls=0" frameborder="0" allowfullscreen="">
</iframe>        
</div>      
</div>    
</body>
</html>

Ce que je fais mal?

Même code dans un violon: https://jsfiddle.net/netroworx/tyet04uz/

Si je sors de l': margin-right: auto; margin-left: auto; De .conteneur Chrome montre la même que Safari je ne pouvais pas trouver tout de bugs: github.com/philipwalton/flexbugs
Vous devrez peut-être ajouter un fournisseur de préfixes pour Safari: stackoverflow.com/a/35137869/3597276

OriginalL'auteur Greg Pagendam-Turner | 2016-07-22