Улучшение скорости CSS3 на iPad

iOS в целом имеет тенденцию сосать с переходами CSS3, анимациями, преобразованиями и т. д. Какие IMO являются одними из лучших функций технологии.

Теперь я слышал, что вы можете обмануть iOS в инициализацию своего аппаратного ускорения, выбросив некоторые случайные 3D-преобразования, а что нет. Поэтому я преобразовал случайный div и поместил его на экран (даже не скрывал), и опыт все еще гладит …

Есть ли способ улучшить производительность переходов CSS3, преобразований, анимаций и т. Д. На iOS? Или веб-приложения обречены на то, чтобы быть пластичными и неуклюжими родных приложений?

Изменить: вот код нарушения …

http://www.abhi.my/sl/html/

Просто следуйте этой ссылке, и вы увидите небольшую демонстрацию, которую я собрал … Анимация гладкая и приемлемая при просмотре на настольном браузере, тот же сайт на iOS страдает … Этот был предназначен для iPhone 4 …

Не стесняйтесь проходить через источник и указывать …

3D-преобразования аппаратно ускоряются на iOS, поэтому все, что вам нужно сделать, это использовать синтаксис 3D всякий раз, когда вы это делаете, и он отлично работает – по крайней мере, на 3GS и выше.

Но вы не используете преобразования в своем примере, вы используете переход по позиции, который совершенно другой, и да – приводит к дрянной fps на мобильном телефоне.

Вместо этого вы должны использовать -webkit-transform: translate3d (-100%, 0,0) (или подходящий аналог). Вы можете видеть, насколько это более гладко из примера на этой странице.

Вы должны обязательно использовать -webkit-transform, а не -webkit-переход. С учетом сказанного, для кросс-браузерной поддержки и простоты использования, я бы определенно пошел с плагином, таким как jQuery Transit, который позволяет вам легко создавать плавные, родные переходы и эффекты на iOS, а также на Android и других мобильных устройствах.

Пример JSFiddle jQuery Transit в действии

Пример кода:

HTML:

<div class="moveMe"> <button class="moveUp">Move Me Up</button> <button class="moveDown">Move Me Down</button> <button class="setUp">Set Me Up</button> <button class="setDown">Set Me Down</button> </div> 

Javascript:

 $(".moveUp").on("click", function() { $(".moveMe").transition({ y: '-=5' }); }); $(".moveDown").on("click", function() { $(".moveMe").transition({ y: '+=5' }); }); $(".setUp").on("click", function() { $(".moveMe").transition({ y: '0px' }); }); $(".setDown").on("click", function() { $(".moveMe").transition({ y: '200px' }); }); 

Кто-то еще много сделал для вас тяжелую работу. Я не могу стоять возиться с анимацией CSS3, и этот плагин делает свою работу удивительно. Я тестировал это с iPad, iPod Touch, iPhone и Android. Мне нравится родное чувство, которое оно дает.

  • Youtube iframe встраивается с масштабированием webkit-transform на iOS
  • Обнаружение воспроизведения видео в компоненте WKWebView
  • UIWebView застрял после webViewDidStartLoad
  • UIWebView позволяет использовать свойствоInlineMediaPlayback для 4.2 на iPad
  • видимые полосы прокрутки IOS с "webkit-overflow-scrolling: touch"
  • как заставить текстовый файл с настраиваемым расширением открываться в myApp, а не отображаться как текст в Safari
  • Как получить слово в указанном месте на WKWebView?
  • iOS: сбой WebKitLegacy
  • Что делает <meta name = "viewport" content = "width = device-width"> в ландшафтном режиме на iOS?
  • -webkit-overflow-scrolling: touch разбивает мой -webkit-scrollbar css в iOS
  • Прокрутка Div иногда зависает, если я использую -webkit-overflow-scrolling
  • Давайте будем гением компьютера.