Остановить создание нежелательной прокрутки в CSS

Question

У меня есть небольшой код с сайта о его animate.css. Проблема, с которой я сталкиваюсь, заключается в том, что при загрузке страницы создается слишком много прокрутки. Если я использую bounceInRight или bounceInLeft, если вы создаете левую или правую прокрутку, и когда я использую bounceInUp или bounceInDown, он генерирует вертикальную прокрутку и когда я минимизирую экран, а затем максимизирую эту прокрутку, автоматически удаляясь. Вот мой CSS и HTML

<div id="logo"> 
     <span id="a"> 
      <span class="dd animated bounceInUp">A</span> 
     </span> 

     <span id="leading"> 
      <span class="da animated bounceInUp">Leading</span> 
     </span> 


     <div> 
     <span id="mep"> 
      <span class="zz animated bounceInUp">MEP</span> 
     </span> 

     <span id="integrated"> 
      <span class="zn animated bounceInUp">INTEGRATED</span> 
     </span> 
     </div> 


     <div> 
     <span id="solution"> 
      <span class="dr animated bounceInUp">Solutions</span> 
     </span> 


     <span id="provider"> 
      <span class="de animated bounceInUp">Provider</span> 
     </span> 


     </div> 

    </div> 

и CSS

<style> 

    #logo      { color:#000; font-family: 'Montserrat', sans-serif; text-align:center; margin-top:150px; height:570px; } 
    #logo span     { display:inline-block; } 
    #logo #a     {margin-right: 10px; font-size:40px; } 
    #logo #leading     {font-size:40px; } 
    #logo #mep     {margin-right: 20px; font-size:80px;} 
    #logo #integrated     { font-size:80px; } 
    #logo #solution      {margin-right: 20px; font-size:50px;} 
    #logo #provider      {font-size:50px;} 

    @media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

    #logo      { color:#000; font-family: 'Montserrat', sans-serif; text-align:center; margin-top:150px;} 
    #logo span     { display:inline-block; } 
    #logo #a     {margin-right: 20px; font-size:15px; } 
    #logo #leading    {font-size:15px; } 
    #logo #mep     {font-size:30px;} 
    #logo #integrated   { font-size:30px; } 
    #logo #solution    {margin-right: 20px; font-size:20px;} 
    #logo #provider    {font-size:20px;} 




/* logo */ 

    .dd       { animation-delay:0.2s; -moz-animation-delay:0.2s; -webkit-animation-delay:0.2s; } 
    .da       { animation-delay:0.8s; -moz-animation-delay:0.8s; -webkit-animation-delay:0.8s; } 
    .dn       { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; } 
    .dg       { animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s; } 
    .de       { animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; } 
    .dr       { animation-delay:1.2s; -moz-animation-delay:1.2s; -webkit-animation-delay:1.2s; } 

    .zz       { animation-delay:1.4s; -moz-animation-delay:1.4s; -webkit-animation-delay:1.4s; } 
    .zo       { animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; } 
    .zn       { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; } 
    .ze       { animation-delay:0.5s; -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; } 

} 

демо http://abskillz.com/bkg-new/ch.html

Answer 1

Дело в том, что приносит много высоты является 570px, что вы даете #logo. Вам это действительно нужно? Текстовые блоки внутри логотипа дают родителям естественную высоту, если вы не делаете ничего подобного position: absolute.

Ваша проблема должна быть устранена путем добавления overflow-y: hidden; к #logo.

Пример: http://codepen.io/brav0/pen/ENrKXR?editors=1100