Хром некорректно отображает svg background. Как с этим бороться?
При масштабировании в хроме иногда возникают отступы в 1px.
Вот скриншот (в данном случае масштаб 65%, но бывает по-разному):
Пример не мой, взят отсюда:
Сам сталкивался с подобным.
Моя теория в том что хром не правильно округляется дробные css пиксели. Этот фантомный 1px возникает не всегда, а только на определенных разрешениях, либо четных, либо нечетных, в зависимости от ширины изображения. Данный баг ловил не только с svg, но и с обычными растровыми изображениями и просто абсолютно спозиционированными блоками. Решаю костылем в виде сдвига на 1px - 2px в нужную сторону.
Но хотелось бы нормального решения.
Это результат округления дробных частей css пикселей, по которым позиционируется объект. Если хочется склеить два изображения, то отбрось эту идею и решай задачу так, чтоб подобная проблема не возникала. Используй целое изображение, или накладывай одно поверх другого, псевдоэлемент закрась синим, поверни на нужный угол и сдвинь, придумай свое решение.
P.S. Лично я не выявил данную проблему в примерах ни в одном браузере.
Просто не изменяй масштаб и будет тебе счастье.
При изменение масштаба также круглое может стать овальным, да и вообще такая мелочь как 1 px по мне это ерунда. Просто к тебе придираются что бы не платить
Простой
