Div collapses on ipad in safari - css

Question

I think it'll be best for anyone wanting to help to check my website and see the issue for him or herself. (iPad required..)
www.....net
As you see, I have 2 sections, one top section and one lower section, both have height 100%.
The lowest section has 4 div's with different shades of blue as background-color. Now..
on the iPad (and only in safari,) I get this issue where the background-color of the lowest section div's of my website get totally messed up or collapses when I change from portrait to landscape or in reverse.
My guess is that because safari has this new feature (as of ios 8) where when you scroll down the tabs section disappears, this in fact makes the viewport or height of the website really higher than the 100% that was previously sufficient, that is, before it disappeared, now if you make the tab come back when you're all the way down my page (by tapping it,) you'll see that this is true..
Is there some way to fix this?
If you need code here please ask but I think it'll be best for you to check it out yourself first.. because I have no idea where to start..
EDIT:
(by the way.. strange enough this does not happen on my iphone 6..)
Bowser.

Answer 1

<div id="bl-main" class="bl-main">
<section>
<a href="http://www.blog.elliotwagner.net">
<div class="bl-box">
<h2 class="bl-icon bl-icon-about">Blog</h2>
</div>
</a>
</section>
<section id="bl-work-section">
<a href="about.html">
<div class="bl-box">
<h2 class="bl-icon bl-icon-works">Résumé</h2>
</div>
</a>
</section>
<!-- For this section you need to set the top to be 50% not -50% -->
.bl-main > section:nth-child(3) {
top: 50%;
left: 0;
background: #5071B8;
}
<section>
<a href="books.html">
<div class="bl-box">
<h2 class="bl-icon bl-icon-blog">Books</h2>
</div>
</a>
</section>
<section>
<a href="about.html">
<div class="bl-box">
<h2 class="bl-icon bl-icon-contact">About</h2>
</div>
</a>
</section>
<div style="clear: both;"> </div>
</div>