Почему спрайт заданный через background съезжает?

Question

[DmitryLife]

Добрый день.

Иконки на сайте реализовали через спрайт, background. Все отображается нормально, но на более мелких разрешениях начинает появляться край другого изображения. Примеры:
Нормально:

ПРи увеличение:


Я подозреваю, что это из-за знака после запятой. НО при этом пример спрайта (который был сделан через сервис), не показывает ни каких проблем при увеличение.

Сайт для пущей наглядности:
https://tlmods.org/

Comments

[lpite]

Вставлять картинки через background не лучшее решение

Answer 1

[Валерий Матвиенко]

Думаю этот эффект возникает при масштабировании, потому что алгоритм вынужден перестраивать размер, для примера есть ваш прямоугольник определенным цветом, размером 12px на 5px - увеличили на 20% получится 12+2.4 px на 5+1 px - вроде норм там делаем округление 14px на 6px получится, а если больше увеличиваем и выйдет 12+2,8 px сделаем 15px. Но алгоритм работает с конкретными пикселами и вынужден масштабировать именно пикселы, для этого он при увеличении на 30% вынужден на соседние пикселы оказать свое влияние на 30%, смешивание цветом там произойдет, плюс если не крайний первый пиксель еще надо рассчитывать смещение. Надеюсь понятно написал.

Теперь как решить проблему!
1) отказаться от спрайта
2) есть мысль, что ваш пример с сервиса, который без проблем, он векторный. Если да, тогда сделайте себе тоже векторный формат.
3) я бы посмотрел в сторону того как бы сделать чтобы эти картинки размер не меняли