Скрытие полосы прокрутки при анимации CSS

Question

Я пробовал все типы overflow безрезультатно. Когда скользящий div скользит вправо и масштабируется, горизонтальная полоса прокрутки сохраняется!

.wrapper { 
 
    width: 100%; 
 
} 
 
#slide { 
 
    position: absolute; 
 
    left: -40px; 
 
    background: black; 
 
    -webkit-animation: slide 5s forwards; 
 
    -webkit-animation-delay: 0s; 
 
    animation: slide 5s forwards; 
 
    animation-delay: 0s; 
 
\t zoom: 1.1; 
 
\t -moz-transform: scale(1.1); 
 
\t width: 100%; 
 
\t height: 400px; 
 
} 
 

 
@-webkit-keyframes slide { 
 
    100% { left: 40px; zoom: 1; -moz-transform: scale(1); } 
 
} 
 

 
@keyframes slide { 
 
    100% { left: 40px; zoom: 1; -moz-transform: scale(1); } 
 
}

<div class="wrapper"> 
 
    <div id="slide"></div> 
 
</div>

Answer 1

Установка transform: translateZ(0) на обертке исправляет проблему переполнения - возможно, это связано с преобразованием создает новый контекст стэка.

Демо:

html, body { 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    overflow-x: hidden; 
 
    transform: translateZ(0); 
 
} 
 
#slide { 
 
    position: absolute; 
 
    left: -40px; 
 
    background: black; 
 
    -webkit-animation: slide 5s forwards; 
 
    -webkit-animation-delay: 0s; 
 
    animation: slide 5s forwards; 
 
    animation-delay: 0s; 
 
\t zoom: 1.1; 
 
\t -moz-transform: scale(1.1); 
 
\t width: 100%; 
 
\t height: 400px; 
 
} 
 

 
@-webkit-keyframes slide { 
 
    100% { left: 40px; zoom: 1; -moz-transform: scale(1); } 
 
} 
 

 
@keyframes slide { 
 
    100% { left: 40px; zoom: 1; -moz-transform: scale(1); } 
 
}

<div class="wrapper"> 
 
    <div id="slide"></div> 
 
</div>