Анимированные веб-фреймы обрезаются Safari (видно в iOS 14.x, 15.x, 16.x) ⇐ IOS

[Anonymous]

Мы были очень счастливы, когда увидели, что Safari наконец-то смог отображать столь необходимые веб-изображения, которые экономят время загрузки и экономят время. Начиная с iOS 14.7, Safari, похоже, нормально работает с статическими веб-страницами. Но когда дело доходит до анимационных веб-страниц, наши тесты показали, что у Safari есть проблемы. Не все кадры в наших анимированных веб-страницах, кроме некоторых, обрезаются по горизонтали, и почти половина изображения исчезает, из-за чего приложение выглядит глючно.
В другом случае, когда каждый кадр имел прозрачные пиксели, Safari показывал новые кадры без очистки предыдущих кадров. В результате получился беспорядок, когда каждый кадр был наслоен и виден поверх другого.
С обоснованным предположением мы предполагаем, что проблема требует исправления ошибки в Safari, которое, мы надеемся, появится в будущем. Тем не менее, если кто-нибудь знает быстрое решение, поделитесь, пожалуйста.
Примечание. Наши тесты показали, что все остальные основные браузеры прекрасно справляются с анимированными веб-страницами, воспроизводятся плавно и красиво без каких-либо проблем. .
Примечание. С 2024 года формат WEBP очень ценен, поскольку он обеспечивает высокое соотношение качества и размера (намного лучше, чем GIF), и у вас есть свобода устанавливать разную продолжительность для каждого файла. рамка. Поскольку веб-сайты могут делать то, что не может сделать никто другой, в настоящее время мы живем в период, когда у человека нет возможности выбрать другой формат в качестве простого запасного варианта (опять же с 2024 года).
ОБНОВЛЕНИЕ. Похоже, проблема сохраняется в iOS 15.x и 16.x.

ПРИМЕЧАНИЕ. Пока эта ошибка не исправлена, она выглядит лучшим способом предложить высококачественную анимацию при сохранении компактного размера файла можно, создав листы спрайтов avif или webp (длинные изображения, содержащие все кадры вашей анимации) и воспроизведя их с помощью css< /code> Steps(), предпочтительно без перехода с использованием Transform TranslateX() или TranslateY(), конечно, поскольку они помещены в контейнер div, для переполнения которого установлено значение скрытое и ширина или высота установлена ​​так, что будет отображаться только один кадр. показывать одновременно.

Подробнее здесь: https://stackoverflow.com/questions/685 ... -15-x-16-x