Глюк Safari: почему расширяется окно браузера при css-анимации с использованием translateX?

Question

[MikeMiller]

Ребята, всем привет!

Решил освоить CSS, вроде бы подвижки есть, и гугл помогает. Но на этот вопрос ответа не нашел (не знаю, как сформулировать в поиске).

Предположим есть вот такой кусочек кода:

.h1scroll {
-webkit-transform: translateX(100%);
-webkit-animation: scroll 0.9s 1 ease-out;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes scroll {
0% { -webkit-transform: translateX(100%);
}
40% { -webkit-transform: translateX(-10%);
}
100% { -webkit-transform: translateX(0%);
}
}

Это значит, что заголовок затаился где-то далеко справа и потом выезжает влево до центра страницы. Но вот проблема в том, что Safari для этого заголовка создает "гараж" :)) Т.е. если активировать этот класс, то после анимации появляется горизонтальный скролл в окне и я могу прокручивать вправо на ширину еще одного экрана (там пусто).

В Хроме все работает отлично! Такой проблемы нет. Ширина страницы равна ширине окна браузера.

Кто сталкивался с такой проблемой и как решал?)

Answer 1

[Александр]

Оберните весь контент страницы в блок с примерно таким CSS:

overflow: hidden;
width: 100%

Comments

[MikeMiller]

Спасибо! Сделал даже немного по-другому, обернул родительский див в этот CSS и все заработало. Странно, что хром этого не требует.