Мобильные Safari, Css анимации зависают на навигации - PullRequest
0 голосов
/ 16 октября 2018

Итак, я работаю над мобильным веб-сайтом для клиента и добавил анимацию загрузки CSS, которая срабатывает, когда пользователи переходят по страницам или загружают ajax.

Анимации отлично работают в Chrome, но в IOS я обнаружил, что сразу после запуска навигации (через window.location.href или просто щелкнув тег привязки) анимация загрузки просто зависает.Это происходит в начале вызова, а не после загрузки страницы, так что в течение достаточно времени css ничего не делает, и сайт выглядит так, как будто он зациклен на чем-то.Я также добавил бы, что анимация работает, когда я просто выполняю ajax-вызовы.

Тем временем я установил задержку между тем, когда анимация загружается, и когда навигация действительно происходит, и это немного помогаетс внешним видом сайта, но не очень.

Есть ли какие-либо решения или идеи относительно того, почему это может происходить?

1 Ответ

0 голосов
/ 28 июня 2019

Замораживание анимаций после запуска навигации, по-видимому, является общей проблемой браузеров Webkit.

См. https://bugs.webkit.org/show_bug.cgi?id=16177

Существует обходной путь, если вы можете отправить запрос через Ajax / XHR.Тогда анимация продолжит играть.Вы можете запустить навигацию после получения ответа 200 / ok от бэкэнд-сервиса.

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

...