I am developing a Flexbox based static homepage for a website and I can’t seem to figure out how to make it look the same on both Chrome and Safari.
On chrome it renders how I expect, but on Safari, the image stretches and distorts and doesn’t work correctly.
I’ve added vendor prefixes, but that hasn’t helped. The main image of the test tubes just doesn’t seem to obey the “height:100%” rule I have set it.
the example code is here
https://codepen.io/anon/pen/LRdrwV
<body>
<div id="flex-column">
<div class="nav">
<h2 class="menu">Menu</h2>
</div>
<div class="title">
<h1> Title </h1>
</div>
<div id="flex-box">
<img src="http://www.sibeliusnaturalproducts.com/wp-content/uploads/2016/08/sib-banner-v1-repeat.jpg">
<div class="blurb">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
</div>
<div id="bg">
<img src="http://www.sibeliusnaturalproducts.com/wp-content/uploads/2016/08/sib-banner-v1-main.jpg">
</div>
</div>
</body>
and the CSS
body,html {
height: 100%;
margin:0;
}
#flex-column {
display: flex;
flex-direction: column;
height:100%;
}
.menu, .title{
padding-left: 100px;
}
.nav{
flex: 0 1 auto;
background-color:red
}
.title{
flex: 0 1 auto;
background-color:#f2f378;
}
#flex-box{
flex: 0 1 auto;
display:flex;
height: 100%;
justify-content: center;
align-items: flex-end;
position:relative;
z-index: -2
}
#flex-box > .blurb{
flex:0 1 auto;
max-width:400px;
align-self: center;
box-sizing: border-box;
}
#flex-box > #bg {
flex:0 1 auto;
}
#flex-box > #bg,
#flex-box > img{
max-height:700px;
height:100%;
}
#bg>img{
height:100%;
}
#flex-box>img{
width:100%;
position:absolute;
z-index: -1
}
So the design I'm following is 2 flex boxes, a vertical one containing the menu, title and 2nd flexbox. And a horizontal one containing the descriptive text and some imagery. These are eventually used to handle responiveness, but I've left that out of this example a I'm encountering problems before I even get to that stage.
The problem:
