window.setTimeout () останавливается после навигации по страницам в Safari

Question

У меня есть страница, загрузка которой занимает 8-10 секунд, поскольку сервер выполняет API-вызов внешней службы, которая обрабатывает некоторые большие числа. Это вызывается после отправки формы.

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

Затем я дополнил это, вызывая некоторый код каждые 2 секунды с помощью window.setTimeout (), обновляя индикатор выполнения и показывая сообщение о том, что делает система. Это, конечно, фальшивка, но кажется, что время кажется намного короче, когда за 10 секунд нужно прочитать 4-5 сообщений.

Моя проблема в том, что тайм-аут не работает в Safari (на MacOS или iOS). Он работает во всех других браузерах, включая Chrome на Mac. Как только форма отправлена, все таймеры, кажется, останавливаются (это также влияет на слайд-шоу в баннере)

Кто-нибудь сталкивался с этим и знает об обходном пути? На самом деле я не хочу заменять стандартную форму отправки на AJAX, так как это потребует небольшой реструктуризации, на которую у нас нет бюджета.

Answer 1

Я знаю, что это очень специфический вариант использования, но в итоге я использовал CSS-анимацию (с ключевыми кадрами) вместо setTimeout (), чтобы позволить анимации запускаться после начала навигации.

Я наткнулся на тот факт, что большинство анимированных свойств в Safari, похоже, не работают после запуска запроса страницы, но все «трансформируемые» работают. Может быть, это ошибка Safari, я не уверен.

Так что вместо «top» я использовал translateY, а вместо width я использовал scaleX.