Swiper в Safari сам делает слоем каждый слайд, translate3d для центрирования, clip-path на каждом слайде, выезд меню через right — и полноэкранное размытие над всем этим. Как посчитать слои и как ужать их с 769 до 22.
В режиме fade swiper кладёт все слайды стопкой в видимую область, и loading=lazy грузит обложки всех товаров: 63,7 МБ, из них 46 — невидимые. Адреса только активному и соседям, дальним — visibility: hidden: 36,4 МБ без пустых слайдов.
Высота картинки считалась от ширины через aspect-ratio, а swiper округляет ширину слайда: 341,25 → 341 px. Это 0,14 px по высоте и 2 px на айфоне — на каждой из двадцати строк. Лечение — высота напрямую в vw.
Chrome гасит сдвиги выше экрана привязкой прокрутки и не пишет их в CLS, у Safari привязки нет. Мерить высоту документа и позицию элемента в дробных пикселях. Три причины: шрифт 142 px, заглушки блоков 272 px и округление слайдера.
$ tail -f /blog
Пишу разборы по скорости сайтов, кэшу и разработке — на живых проектах и с цифрами. Подпишитесь, и ссылка на новую статью придёт сразу после выхода. Без рекламы и спама, отписаться — в один клик.
или на почту
