Хром некорректно отображает svg background. Как с этим бороться?

Question

[mikeyuriev]

При масштабировании в хроме иногда возникают отступы в 1px.
Вот скриншот (в данном случае масштаб 65%, но бывает по-разному):

Пример не мой, взят отсюда:

Comments

[Петр]

В firefox тоже эффект проявляется. А бороться наверное javascript-м меняя размер.

[Александр Епихин]

Сам сталкивался с подобным.
Моя теория в том что хром не правильно округляется дробные css пиксели. Этот фантомный 1px возникает не всегда, а только на определенных разрешениях, либо четных, либо нечетных, в зависимости от ширины изображения. Данный баг ловил не только с svg, но и с обычными растровыми изображениями и просто абсолютно спозиционированными блоками. Решаю костылем в виде сдвига на 1px - 2px в нужную сторону.
Но хотелось бы нормального решения.

[fdroid]

Петр, я правильно понял, что речь про полосочку разрыва на картинке? У меня FF и такой нет.

[profesor08]

Александр Епихин, верстай нормально и не придется выдумывать решения проблем.

[Lord_Dantes]

Александр Епихин, верстай нормально и не придется выдумывать решения проблем.

Answer 1

[profesor08]

Это результат округления дробных частей css пикселей, по которым позиционируется объект. Если хочется склеить два изображения, то отбрось эту идею и решай задачу так, чтоб подобная проблема не возникала. Используй целое изображение, или накладывай одно поверх другого, псевдоэлемент закрась синим, поверни на нужный угол и сдвинь, придумай свое решение.

P.S. Лично я не выявил данную проблему в примерах ни в одном браузере.

Answer 2

[Юра Комаров]

Просто не изменяй масштаб и будет тебе счастье.
При изменение масштаба также круглое может стать овальным, да и вообще такая мелочь как 1 px по мне это ерунда. Просто к тебе придираются что бы не платить