voker2005
@voker2005

Как убрать глюк скроллинга сайдбара в мобильном Safari на iPhone?

Добрый день.

Тема будет касаться левого SideBar'a для мобильной версии, хочу сделать SideBar как у МВидео. Для меня принципиально важно сделать выезд не левого сайдбара, а выезд главного контента вправо, под которым будет сам сайдбар.

5b4006c6e8b32312009732.jpeg

А также:
1. Чтобы ничего не прыгало при скролинге.
2. Чтобы можно было скролить и контентную часть и сам сайдбар по вертикали.
3. Горизонтальный скролинг отключить.

В качестве готового решения нашел вот такой скрипт Тумпанус, многие я уверен его знают, ссылка на demo интересует эффект №2 под названием REVEAL

Тут его можно скачать

И так, все бы ничего, а столкнулся вот с такой проблемой, посмотрите моё видео с описанием моего бага на ютубе тут

Смысл такой, в мобильном Google Chrome работает прекрасно, а в мобильном Safari периодически происходят осечки со скролингом сайдбара, наблюдаются прыжки (см.видео, ссылка чуть выше).

И да, для Safari, в CSS для плавной прокрутки добавлено правило к html
html {height: 100%;overflow-x:hidden;-webkit-overflow-scrolling:touch;}



Немного о логике работы скрипта

5b40118f45e8e363412594.jpeg

в оригинале скрипта нет настройки на скролл, я добавил следующим образом:

Блоку .st-menu и .st-pusher добавил overflow-y: auto;

.st-menu {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	visibility: hidden;
	width: 300px;
	height: 100%;
	background: #48a770;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	overflow-y: auto;
}
.st-pusher {
	position: relative;
	left: 0;
	z-index: 99;
	height: 100%;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	overflow-x: auto;
}


Внимание вопрос :)
Как убрать глюк скроллинга сайдбара в мобильном Safari на iPhone?
Глюк я показал в видео, по ссылке на ютубе, см.выше.
  • Вопрос задан
  • 682 просмотра
Пригласить эксперта
Ответы на вопрос 1
JackShcherbakov
@JackShcherbakov
Здравствуйте!

Если у вас стоит user-select:none на каком-либо элементе, то уберите это свойство. По неизвестным мне причинам, именно в сафари из-за этого свойства начинает глючить - невозможно вводить текст с айфона. Возможно вам это тоже поможет. Возможно у вас где-то *{user-select:none} указано (у меня из-за этого была ошибка - два дня искал).

Еще попробуйте воспользоваться автопрефиксирами css. Они автоматически все префиксы проставят - возможно поможет. Вот например autoprefixer.github.io/ru

Надеюсь я хоть как-то вам помог. Надеюсь скоро исправите этот глюк.

С уважением, Евгений.

UPD:
Попробуйте протестировать на другом ios-устройстве. Возможно такое, что в вашем устройстве в safari какие-то невалидные файлы закешировались и дают сбой - такое очень часто бывает.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы