Flexbox centering on Safari

Question

The following code centers a video vertically and horizontally in Chrome and most modern browsers except for Safari where it is just centered vertically:

<!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>

What am I doing wrong?

Same code in a fiddle: https://jsfiddle.net/netroworx/tyet04uz/

If I take out the: margin-right: auto; margin-left: auto; From .container Chrome shows the same as Safari I could not find any relevant bugs at: https://github.com/philipwalton/flexbugs — Greg Pagendam-Turner, Jul 22 '16 at 10:12
You may need to add vendor prefixes for Safari: http://stackoverflow.com/a/35137869/3597276 — Michael Benjamin, Jul 22 '16 at 12:15

score -3 · Accepted Answer · answered Jul 26 '16 at 00:44

-3

Removed video-container style and changed other styles to:

body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 100vh;
        margin: 0px;
        overflow: hidden;
      }


      .content {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row /* works with row or column */
        flex-direction: row;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        border: 10px solid pink;
      }

answered Jul 26 '16 at 00:44

Greg Pagendam-Turner

2,356
5
32
49

3

No attempt to explain why means this answer is not much use to future developers – Toni Leigh Jul 24 '17 at 08:46
Hi Toni, do you have any questions? – Greg Pagendam-Turner Jul 24 '17 at 11:57
3

I found answers on other questions as it happens - it's best on Stack Overflow to explain why what you did fixed the problem - that way the OP and other readers get knowledge that is useful outside of the scope of the problem, rather than a cut and paste solution they might not understand - for example, for my own problem, which was similar but not the same as the OP, this was no use, as I don't know which bits fixed the problem in the question or why – Toni Leigh Aug 11 '17 at 09:36

Flexbox centering on Safari

1 Answers1