Div обрушивается на ipad на сафари

Question

Я думаю, что это будет лучше всего для тех, кто хочет помочь проверить мой сайт и увидеть проблему для себя. (IPad требуется ..)

WWW ..... чистый

Как вы видите, у меня есть 2 секции, одну верхнюю часть и одну нижнюю часть, и имеют высоту 100%. В нижней части есть 4 div с разными оттенками синего в качестве фона. Теперь .. на iPad (и только в сафари). Я получаю эту проблему, когда фоновый цвет самого нижнего раздела div моего сайта полностью перепутался или обрушился, когда я перехожу от портрета к пейзажу или наоборот. Мое предположение заключается в том, что, поскольку сафари имеет эту новую функцию (начиная с ios 8), когда при прокрутке вниз раздел вкладок исчезает, это фактически делает видимость или высоту веб-сайта действительно выше, чем 100%, что было ранее достаточно, что перед тем, как он исчезнет, ​​теперь, если вы вернете вкладку, когда закончите мою страницу (нажав ее), вы увидите, что это правда.

Есть ли способ исправить это?

Если вам нужен код здесь, пожалуйста, спросить, но я думаю, что это будет лучше для вас, чтобы проверить это самостоятельно первый .. потому что я понятия не имею, с чего начать ..

EDIT: (кстати .. довольно странно это не происходит на моем 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;">&nbsp;</div> 
</div>