Улучшение скорости 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. Мне нравится родное чувство, которое оно дает.

  • Прокрутка iOS Safari вверх не работает на определенных страницах. Зачем?
  • WebKit бросает исключение на iOS 8 для вызова setBeingRemoved:
  • Поиск эквивалента для UIWebViewDelegate для портирования приложения iOS в OSX
  • Прозрачный SVG в iOS WebKit
  • Как сделать запрос JQuery GET / AJAX частному / настраиваемому протоколу URL?
  • WKWebView полноэкранный режим вместо кадра?
  • Каковы последствия использования неподдерживаемого свойства WebKit?
  • WKWebView падает в ускоренном режимеAnimationDidStart
  • Как включить локальное хранилище в моем приложении на основе WebKit?
  • Быстрый переход в UIWebView и WKWebView
  • Исправлена ​​навигация, когда прыгали -webkit-overflow-scrolling: touch;
  • Interesting Posts

    Установка названия динамического представления из представления таблицы

    Включая много изображений в приложении iPhone без замедления xcode

    Невозможно использовать предикат, который сравнивает даты в Magical Record

    Как настроить EKEventEditViewController

    Как создать эффект SnapChat TableView

    Zoom / Pinch pdf, который загружается в UIWebView

    AVFoundation Ориентация изображения на 90 градусов в предварительном просмотре, но прекрасная в рулоне камеры

    Ошибка цвета UISegmentedControl – цветные изображения отображаются на симуляторе, а не на устройстве

    Публикация RTMP-потока в Red5 Server формы iOS-камеры

    Spring Meng Для анимации анимации?

    Как использовать переключатель между различными режимами в пользовательских элементах управления UIImagePickerController?

    UIPopoverController: Как переместить его?

    Проблема с сохранением хранилища iOS

    Где хранятся данные KeyChain?

    Используя RestKit, используйте блок для загрузки объекта, когда и как отменить запрос?

    Давайте будем гением компьютера.