I am encountering a frustrating issue with my font "History Maps" centering within its title box on Chrome using flexbox, but failing to do so in the Safari browser. For reference:
Below is the HTML and CSS code in question:
/* Parent elements */
html,body {
height:100%;
}
/* Setting the container-fluid, row, and column classes to occupy 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%; /* Ensuring background does not stretch outside container div */
height:15%; /* Relative to parent elements (.container-fluid,.row, .col-md-6, .col-xs-10 all set to 100%) */
border-style:solid;
border-width:2px;
border-color:black;
background: url("../img/pages/frame4.3.jpg");
background-size: 100% 100%; /* Background image fills 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: 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;
}
@media only screen and (max-device-width : 480px) {
#maintitle {
font-size:30px;
width:200px;
}
}<!DOCTYPE html>
<html lang = "en">
<head>
<link href="/css/bootstrap.min.css" rel="stylesheet"/>
<meta charset = "utf-8">
<meta name="viewport" content = "width=device-width, initial-scale = 1">
<link href="/css/welcome.css?parameter=2" rel="stylesheet"/>
<title>History Maps</title>
<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "container-fluid" style = "border:solid;">
<div class = "row" style = "margin-top:5%">
<div class = "col-md-offset-3 col-md-6 col-xs-offset-1 col-xs-10" >
<div id = "titleframe">
<img id ="titlepaper" class = "img-fluid" src="img/pages/paper.jpg">
<font id="maintitle">History Maps</font>
</div>
</div>
</div>
</div>
</body>
</html>If you have insight into why the font-centering behavior differs between Chrome and Safari, I would greatly appreciate any guidance.
Best Regards