Flexbox working differently on safari compared to chrome
<p>I have here a rather frustrating scenario where my font "History Maps" centres within its title box on chrome using flexbox, but does not at all within the safari browser. Please see: <a href="http://www.historymaps2.drcrittall.com/welcome.php" rel="nofollow noreferrer">http://www.historymaps2.drcrittall.com/welcome.php</a></p>

<p>Here is the html and CSS:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code> /* Parent elements */ 
    html,body {
    
     height:100%;
    }
    
    /* Sets the container-fluid, row and column classes to 100% of the html and body elements */ 
    .container-fluid,.row, .col-md-6, .col-xs-10 {
     height:100%;
    }
    
    
    
    #titleframe {
    
     position:relative;
     display:-webkit-box;
     display:-ms-flexbox;
     display:flex;/* Flex-box ensures font is centered both vertically and horizontally within the title frame using align-items and justify-content. See http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block */
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;  
        max-width:100%; /* max-width ensures background does not stretch outside container div */ 
        height:15%;   /* Represents height relative to parent elements - in this case .container-fluid,.row, .col-md-6, .col-xs-10 which are all set to 100% */  
        border-style:solid;
        border-width:2px;
        border-color:black;
        
        background: url("../img/pages/frame4.3.jpg");
        background-size: 100% 100%; /* Sets background image to fill 100% of container in both x and y directions. See: http://stackoverflow.com/questions/15160764/background-image-stretch-y-axis-only-keep-repeat-x */
        background-repeat:no-repeat;
        
    }
    
    #titlepaper {
    
        position:absolute;    
        top:0px;
        left:0px;
        right:0px;
        bottom:0px;    
        width:100%; 
        height:100%; 
        border-style:solid;
        border-width:2px;
        border-color:black;
        /*padding:12px 25px;*/
        padding: 2% 5.5% 2% 5%; 
        
    }
    
    #maintitle {
    
        position:absolute;   
        font-family:"Roboto Condensed", sans-serif;
        font-style:italic;
        font-weight: 700;
        color: black;
        text-shadow: 0px 3px 0px #b2a98f,
                     0px 14px 10px rgba(0,0,0,0.15),
                     0px 24px 2px rgba(0,0,0,0.1),
                     0px 34px 30px rgba(0,0,0,0.1);
        
        word-wrap:break-word;   
        font-size:50px; 
        width:500px;
        text-align: center;
        flex:1; 
     
    
    }
    
    /* All media break-points: https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints */
    @media only screen and (max-device-width : 480px) {
    
     
     
     
     /* Styles */
     #maintitle {
     
      font-size:30px;
      
      width:200px; 
       
     
     }
     
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;

&lt;html lang = "en"&gt;

    &lt;head&gt;
 
        &lt;!-- http://getbootstrap.com/ --&gt;
        &lt;link href="/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;meta charset = "utf-8"&gt; 
  
  &lt;meta name="viewport" content = "width=device-width, initial-scale = 1"&gt;
  
        &lt;link href="/css/welcome.css?parameter=2" rel="stylesheet"/&gt;
        
        &lt;title&gt;History Maps&lt;/title&gt;

        &lt;!-- https://jquery.com/ --&gt;
        &lt;script src="/js/jquery-1.11.3.min.js"&gt;&lt;/script&gt;

        &lt;!-- http://getbootstrap.com/ --&gt;
        &lt;script src="/js/bootstrap.min.js"&gt;&lt;/script&gt;

    &lt;/head&gt;
    
    &lt;body&gt;
    
     &lt;div class = "container-fluid" style = "border:solid;"&gt;
      
      &lt;div class = "row" style = "margin-top:5%"&gt;
       &lt;div class = "col-md-offset-3 col-md-6 col-xs-offset-1 col-xs-10" &gt;
        &lt;!--
        &lt;img id = "titleframe" src="../img/pages/frame4.3.jpg" class="img-fluid" alt="Responsive image" style = "height:auto; max-width:100%;"&gt;
        
        &lt;img id ="titlepaper" src="img/pages/paper.jpg" class="img-fluid"&gt;--&gt;
        &lt;div id = "titleframe"&gt;
         &lt;img id ="titlepaper" class = "img-fluid" src="img/pages/paper.jpg"&gt;
         &lt;font id="maintitle"&gt;History Maps&lt;/font&gt;     
        &lt;/div&gt;
        &lt;!--&lt;div class = "container-fluid" id = "test"&gt;&lt;/div&gt;--&gt;
                
       &lt;/div&gt; 
      
      &lt;/div&gt;
      
     &lt;/div&gt;
    
    &lt;/body&gt;
    
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>If anyone can see why the font-centring behaves so differently on Chrome to Safari I would be most grateful to know why. </p>

<p>Kind Regards</p>