Что видел владелец
Обложки товаров на витрине выглядели рассыпавшимися на квадраты. Тонкие линии — провод лампы, молния рюкзака, ремешок часов — шли ступеньками. Встроенные картинки-заглушки при этом были чистыми.
Четыре починки мимо цели
Сначала показалось, что виноваты мелкие исходники: часть фотографий была 425 пикселей по стороне. Заменили — не помогло. Потом нашлось, что уменьшенные копии готовились неверно: картинку меньше заданного размера код РАСТЯГИВАЛ. Это был настоящий дефект, его починили — не помогло.
Третьей находкой стал композиторский слой: появление блоков при прокрутке оставляло на картинках подсказку will-change, и браузер растеризовал их один раз, а дальше растягивал готовый растр. Тоже настоящий дефект, тоже починили — и снова не помогло.
Четвёртой попыткой стали квадратные копии, готовые заранее. Не помогло, зато навредило: квадрат обрезал вертикальные фотографии, и у обложек срезало надписи.
Что решило дело
Три наблюдения владельца, и каждое было уликой:
- Во всех браузерах сразу — значит виновато не поведение конкретного движка
- Во всех шаблонах сразу — значит правило общее, а не в одном шаблоне
- А на странице товара чисто — значит дело в масштабировании: там его почти нет
Сходилось это в одном месте — общем правиле для картинок. Там стояло image-rendering: crisp-edges. Этот режим ЗАПРЕЩАЕТ браузеру сглаживать картинку при масштабировании: он придуман для пиксель-арта и схем, где размытие портит замысел, а на фотографии даёт зубцы на каждой наклонной линии. Заглушки не страдали, потому что они векторные и рисуются формулами.
Одна строка, снятая за минуту, — и пять заходов на поиск. Такова цена правила, которое выглядит безобидной оптимизацией и молча меняет поведение всего сайта.
Что осталось полезного
Три починки по дороге были настоящими и остались в системе: копии больше не растягиваются, слой снимается после появления блока, а карточка витрины получает готовую копию нужной пропорции. Ложным был не диагноз, а уверенность, что найденное объясняет ВСЁ.
