I am facing an issue where I have a child div vertically centered under a parent div with a specific height. The child div is assigned the height:100% property, but it seems to be not working correctly on Safari only. To see more about this problem, you can check out the screenshot here.
Interestingly, everything functions as expected on Chrome and Mozilla, but not on Safari. You can view the live version of the website here.
Any assistance on resolving this issue would be highly appreciated. Thank you!
Update: Below is the relevant HTML code snippet.
<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>