Дергаются элементы при скролле в safari. Как исправить?
С touchpad, сенсорным экраном и apple mouse нормально работает, но с обычной мышкой возникают проблемы при скролле в safari - элементы внутри section дергаются начинают дергаться при скролле.
Код:
<section id="mission" class="section mission_text"> <div> <h2 class="bold" style="animation-play-state: running;">Наша миссия — помочь вам автоматизировать <br> бизнес-процессы. Делаем на совесть.</h2> <h4 style="animation-play-state: running;">Познакомься с нашей командой</h4> </div> <div class="mission_arrow" onclick="sidebarScrollToBlock('team');" style="animation-play-state: running;"></div> <img class="mission_text_ball" src="assets/images/bg/yellow-ball-378x400.svg" alt=""> </section> |
<section id="mission" class="section mission_text"> <div> <h2 class="bold" style="animation-play-state: running;">Наша миссия — помочь вам автоматизировать <br> бизнес-процессы. Делаем на совесть.</h2> <h4 style="animation-play-state: running;">Познакомься с нашей командой</h4> </div> <div class="mission_arrow" onclick="sidebarScrollToBlock('team');" style="animation-play-state: running;"></div> <img class="mission_text_ball" src="assets/images/bg/yellow-ball-378x400.svg" alt=""> </section>
html { height: 100%; -webkit-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; overscroll-behavior: none; scroll-behavior: smooth; } section { width: 100%; max-width: 1372px; margin: 0 auto; max-height: 100vh; height: 100vh; -webkit-scroll-snap-align: start; scroll-snap-align: start; overflow-x: hidden; overflow-y: hidden; } .mission_text { max-width: 100vw; display: flex; flex-direction: column; justify-content: center; position: relative; transition: all linear 1s; } .mission_text h2 { width: fit-content; margin: 0 auto; letter-spacing: 1.44px; } .mission_text h4 { margin-top: 2.66vh; color: var(--text-lighter-black); text-align: center; letter-spacing: 0.72px; } .mission_arrow { cursor: pointer; margin: 5.77vh auto 0; width: 78px; height: 38px; background: url("../images/icons/arrows-down.svg") center no-repeat; } .mission_text_ball { position: absolute; right: -250px; bottom: 100px; transform: rotate(30deg); opacity: 0.6; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform:translateZ(0px); -moz-transform:translateZ(0px); -o-transform:translateZ(0px); transform:translateZ(0px); } |
html { height: 100%; -webkit-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; overscroll-behavior: none; scroll-behavior: smooth; } section { width: 100%; max-width: 1372px; margin: 0 auto; max-height: 100vh; height: 100vh; -webkit-scroll-snap-align: start; scroll-snap-align: start; overflow-x: hidden; overflow-y: hidden; } .mission_text { max-width: 100vw; display: flex; flex-direction: column; justify-content: center; position: relative; transition: all linear 1s; } .mission_text h2 { width: fit-content; margin: 0 auto; letter-spacing: 1.44px; } .mission_text h4 { margin-top: 2.66vh; color: var(--text-lighter-black); text-align: center; letter-spacing: 0.72px; } .mission_arrow { cursor: pointer; margin: 5.77vh auto 0; width: 78px; height: 38px; background: url("../images/icons/arrows-down.svg") center no-repeat; } .mission_text_ball { position: absolute; right: -250px; bottom: 100px; transform: rotate(30deg); opacity: 0.6; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform:translateZ(0px); -moz-transform:translateZ(0px); -o-transform:translateZ(0px); transform:translateZ(0px); }
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для исправления проблемы с дергающимися элементами при скролле в Safari, вам может помочь использование CSS свойства `-webkit-overflow-scrolling: touch;`.
Это свойство позволяет браузеру Safari использовать оптимизированный скроллинг для элементов, что может улучшить производительность и сделать скроллинг более плавным.
Пример использования этого свойства в CSS:
.element { overflow-y: auto; -webkit-overflow-scrolling: touch; }
Добавьте этот код к элементам, которые дергаются при скролле, и проверьте, помогло ли это улучшить ситуацию. Также убедитесь, что ваш контент не перегружен избыточными стилями или скриптами, которые могут вызывать проблемы при скроллинге.
Если проблема остается, возможно, вам придется провести более глубокое исследование вашего кода и стилей, чтобы выявить другие потенциальные причины дергающегося скроллинга в Safari.