-webkit-animation-play-state не работает на iOS 8.1 (возможно, тоже ниже)

У меня есть анимация, запущенная при загрузке страницы, и с javascript я добавляю класс, содержащий

-webkit-animation-play-state:paused; 

Работая отлично на OSX сафари и всех других браузерах (даже ПК) тоже, но на мобильных устройствах, только на iOS, что анимация не кажется приостановленной при вызове.

Вот скрипка о том, как состояние анимации работает и приостановлено.

http://jsfiddle.net/uc9c5/2/

Попробуйте в iOS, вы увидите, что это полностью игнорируется.

One Solution collect form web for “-webkit-animation-play-state не работает на iOS 8.1 (возможно, тоже ниже)”

Обходной подход для iOS 8-9 Safari, использующий -webkit-animation: none! Important; вместо -webkit-animation-play-state: приостановлено; Этот подход предназначен для GWD, но может применяться в противном случае

  1. Не используйте событие Pause в GWD (Google Web Designer)
  2. Создайте нормальное событие, которое вызывает функцию javascript, установите «-webkit-animation: none! Important;» к <div> (вы можете добавить / удалить класс css)

Стиль CSS

 .no-animation { -webkit-animation: none !important; } 

Javascript

 div.className = div.className + " no-animation"; 
  1. Чтобы возобновить работу, удалите класс CSS

Javascript

 div.className = div.className.replace("no-animation", ''); 
  1. Обратите внимание, что при удалении / приостановке анимации он возвращается к кадру 0 (00:00 с), поэтому вам может потребоваться рассчитать текущую непрозрачность / позицию для div

http://jsfiddle.net/duchuy/pczsufL9/

  • Ошибка теневого распространения в WebKit в iOS 7 на iPad Retina
  • размер iframe с CSS на iOS
  • Жесты сенсорного экрана для веб-приложений iOS
  • Фоновое изображение не отображается на iPhone / iPad
  • Веб-сайт отображает пробел в правой части экрана на iPhone
  • <input type = "search"> больше не показывает кнопку отмены (x) под iOS
  • Исправить CSS-зависание на iPhone / iPad / iPod
  • Как остановить мою фиксированную навигацию, например, при открытии виртуальной клавиатуры в Mobile Safari?
  • Исходные изображения CSS неправильно изменяются на iPad и iPhone.
  • Мобильный нижний колонтитул Flexbox с вводом вызывает виртуальный разрыв клавиатуры
  • Mobile Safari: инерционная прокрутка по телу И минимальное поведение пользовательского интерфейса?
  • PhoneC: Разработка iOS проста с помощью XCode, Swift3, UITableView, cocatouch, давайте создадим приложения для iPhone, iPad и Macbook.