У меня странная проблема с iOS 13 Safari и Chrome, где Vue v-for - случайное рендеринг изображения одного компонента в другой, , но это происходит только при переходе в другое представление и затем обратно. При начальной загрузке страницы все отображается просто отлично.
Изображения отображаются с помощью v-for для визуализации компонентов, а изображения динамически загружаются с внутреннего URL-адреса с помощью <object :data={{URL}} />.
Это состояние при начальной загрузке страницы:
После навигации куда-либо и обратно:
Код для чата после навигации куда-либо и обратно:
Как видно на рисунке 2, некоторые пусты (код из DOM показан на рисунке 3), а некоторые имеют неправильное изображение. Изображение для «NBA» получено из другого компонента с идентичным кодом, отображаемым в другом v-for (часть «Чат» и «Меню»), который не виден на изображениях. Порядок изображений не совпадает каждый раз, когда это происходит.
Стоит отметить, что Safari также отправляет 2 одинаковых запроса на отсутствующие изображения, а вкладка «Сеть» показывает, что второе не имейте конечное sh время, хотя оба они фактически закончили.
Эта проблема воспроизводима только на iOS 13. Не удалось увидеть ту же проблему на MacOS с использованием Safari и Chrome. Отлично работает на Android и Windows. Странно то, что это не происходит в 100% случаев.
Я также обнаружил еще одну похожую проблему ( Почему Safari дублирует GET-запрос, а Chrome - нет? ), в которой говорится эта ошибка была исправлена в Webkit, но она все еще воспроизводима для меня. Я также нашел кого-то, кто порекомендовал использовать css фоны вместо этого, но я использую динамически загружаемые изображения SVG.
Может кто-то пролить свет на причину этого и, возможно, предложить способы исправить это?