CSS3 Переходы на ios Slow/Not Working

Я пытаюсь начать использовать некоторые CSS3-переходы на чувствительном сайте, который я делаю, и все отлично работает на настольном Chrome и Chrome на Android, но оно не работает должным образом на устройствах ios для обоих Chrome и Safari.CSS3 Переходы на ios Slow/Not Working

CSS-сниппаю Я использую для моего меню, например, ниже:

#menu { 
width: 180px; 
height: 100%; 
position: fixed; 
top: 0; 
left: -180px; 
z-index: 9; 
transition: left 1s; 
-webkit-transition: left 1s; 
}

У меня есть кнопка меню, при нажатии, вызывает в яваскрипте функции, которая изменяет «левый» стиль 0, который переводит его в положение извне левой части экрана.

Все работает нормально на настольных компьютерах и в Chrome, но на ios Chrome и Safari он либо очень прерывистый, либо просто задерживает секунду, а затем всплывает мгновенно. Это делается на всех моих переходах, но я показываю меню один для простоты.

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

-webkit-backface-visibility: hidden; 
-webkit-perspective: 1000; 
-webkit-transform: translate3d(0, 0, 0);

к стилю, чтобы заставить аппаратное ускорение, но это не работает либо. Я не вижу никаких изменений. Любая помощь будет оценена по достоинству.

источник

2016-10-22 Jetteh22

Избегайте использование абсолютного позиционирования переходов он принимает много ресурсов, вместо того, чтобы попытаться использовать 'преобразования: translateX (0)' для горизонтальной регулировки – Swordys

@Swordys Я дам эту чек. Я до сих пор не перепутал «преобразование», потому что до недавнего времени я не пытался переходить к ним, особенно не для мобильных устройств. У меня также такая же проблема с изменчивостью/неработоспособностью элементов, которые не меняют позиционирование, но имеют переход на максимальную высоту и непрозрачность. Лучше всего использовать трансформацию для всех из них? – Jetteh22

Да, если вы используете множество переходов по абсолютным элементам, это будет иметь большое влияние на производительность. Использование переходов - лучшая практика для гладкого опыта. Вы также можете попробовать использовать 'will-change: transform' для принудительного аппаратного ускорения, но в настоящее время он не поддерживается в браузере Safari. – Swordys

Избегайте использование абсолютного позиционирования переходов он принимает много ресурсов, вместо того, чтобы попытаться использовать transform: translateX(0) для горизонтальной регулировки

источник

2016-10-22 21:24:32 Swordys

Это прекрасно работает для меню. Любые советы о том, как получить «переход: max-height 1s, opacity 1s», чтобы не быть прерывистым/просто всплывать? Кажется, я не вижу преобразования для непрозрачности или максимальной высоты. – Jetteh22

Вы пробовали использовать любые функции синхронизации времени, такие как индикаторы «легкость» или «легкость» после секунд? – Swordys

Я пробовал использовать 'ease-in-out',' ease' и 'linear', и это то же самое. Я просто сделал быстрый тест, и это переход на «максимальную высоту», у которой проблема. «Непрозрачность» переходит плавно, но когда я пытаюсь перейти на «максимальную высоту», это то, что неудобно. То, что я делаю с этим, является своего рода обходным путем для перехода на «height: auto», поскольку это не работает. – Jetteh22

CSS3 Переходы на ios Slow/Not Working

ответ

Смежные вопросы