height:100% not working in safari

Question

I have one child div vertically centered under a parent div {parent div has a certain height}. I have assigned the child div with height:100% but it is not taking this property only on safari. Here is a screenshot about the issue.Safari bug

Everything is working fine in chrome and moz but safari. Here is the live version of the website. http://www.ravnapp.com/

Any help will be appreciated, Thank You !

Update: Here is the relevent html code.

<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2">
  <div class="action-image uk-position-relative">
    <div class="uk-cover-background">
      <img src="img/action1.png" width="100%" height="" alt="">
    </div>
  </div>
</div>

<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2 action-text uk-vertical-align">
  <div class="uk-vertical-align-middle">
    <h1 class="avenirlight">TOTAL PRIVACY <br><span class="avenirmedium">AND CONTROL</span></h1>
    <p class="desp blenderbook">Ravn is yours to use as you like. Everything is safe and secure and even your notifications are fully disguised. Your privacy is our priority.</p>
  </div>
</div>

<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2 action-text uk-vertical-align">
    <div class="uk-vertical-align-middle">
      <h1 class="avenirlight">EXHALE, <br><span class="avenirmedium">FINALLY</span></h1>
      <p class="desp blenderbook">Ravn is 100% discreet. All your activity is stored within Ravn so you won’t have any surprises popping up in your chat history or camera roll. We’ve got your back.</p>
    </div>
</div>

<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2">
  <div class="action-image uk-position-relative">
    <div class="uk-cover-background">
      <img src="img/action2.png" width="100%" height="" alt="">
    </div>
  </div>
</div>

It helps to include your code within your question. Please edit to include the relevant html, etc... — FishStix

TinMonkey TinMonkey · Accepted Answer · 2016-07-27T22:33:09

It looks like the container divs don't actually have a height set on them and they need to have a height before the content can vertically center. since you are going full screen and setting width to 50% and want the height to match.. just add

height: 50vw;

to each container. This will set the height to half the viewport width, which will match the width of the box given your current setup.

You will have to adjust your images to be actually square though as they are a few pixels short.

height:100% not working in safari

1 Answers