Анимированные веб-фреймы обрезаются 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 шагов(), предпочтительно с jump-none с использованием Transform TranslateX() или TranslateY(), конечно, поскольку они помещены в контейнер div, для которого значение переполнения установлено как скрытое, а ширина или высота установлена ​​так, что одновременно отображается только один кадр.

ВНИМАНИЕ. Это конкретное исследование было проведено во время разработки веб-приложения SPEAKWORLDLANGUAGES

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