Как исправить некорректное отображение SVG?

Question

[Владимир Новицкий]

SVG в Chrome отображается нормально. Но никак не могу понять, почему в Firefox и IE появляются артефакты?
codepen.io/Novitsky/pen/bNbOQg

Comments

[YemSalat]

Хм, у меня в фоксе без артефактов, но левый край немного обрезан (починилось поставив background-size на 99%)

[Владимир Новицкий]

YemSalat: а у меня нет: www.imageup.ru/img278/1940138/77651918.png
И там не только левый край.

[YemSalat]

Novitsky: Я им баг репорт отправил: https://bugzilla.mozilla.org/show_bug.cgi?id=1096885

[YemSalat]

Novitsky: если можете там тоже отписаться и приложить свой скрин - было бы хорошо

[Владимир Новицкий]

YemSalat: английского не знаю, поэтому просто выложил ссылку на пример и скриншот.

[YemSalat]

Novitsky: ага, спасибо, если можете отредактировать свой комментарий там и добавить вашу операционную систему - будет вообще хорошо

Думаю это все таки баг, т.к. код у вас правильный.

[Владимир Новицкий]

YemSalat: а как он там редактируется? Я что-то не нашел.

[YemSalat]

Novitsky: Походу нельзя редактировать - можете просто еше один комментарий написать.

[Владимир Новицкий]

YemSalat: написал.

[YemSalat]

Novitsky: отлично, надеюсь поправят

[YemSalat]

Novitsky: https://bugzilla.mozilla.org/show_bug.cgi?id=1096885

Попросили скачать Firefox Nightly и попробовать там - возможно уже пофикшено (на маке работает вроде, дома на линуксе попробую)
Если так - значит осталось просто подождать пока nightly станет стабильным

[Владимир Новицкий]

YemSalat: чуть лучше, но все равно с косяками: www.imageup.ru/img278/1941213/77651919.png
Особенно заметно в сравнении с Хромом.

[YemSalat]

Novitsky: Спасибо, отписал им.

[Владимир Новицкий]

YemSalat: да, видел. Спасибо.

Answer 1

[teotlu]

Недавно делали адаптивный сайт, всю голову себе сломал, почему так происходит. В итоге эта проблема решалась через background-size: 99% и всякие такие извращения. Ещё, вроде, помогало создание svg-файлов, у которых края самой фигуры не упираются вплотную в края файла. Но до конца проблема так и не решилась.

UPDATE
Кажется, я нашёл ответ на вопрос. Чтобы избавиться от краевых артефактов в Firefox, нужно включить аппаратное ускорение для отображения элемента. Для этого можно использовать, например, 3d-трансформации. Т.е. просто на элементе пропишите transform: translate3d(0,0,0). Мне помогло.

Comments

[Владимир Новицкий]

99% не помогают: www.imageup.ru/img278/1940138/77651918.png
На счет краев. Есть ли возможность сделать так, чтобы эти отступы в SVG были прозрачными? Типа padding'а.
Просто я делаю в CorelDRAW, а там я такой возможности не нашел. Там можно только абрис сделать, а он не бывает прозрачным.

[Александр Маджугин]

Novitsky: используй inkscape

[Александр Маджугин]

блин, случайно отправил предущее.
Короче вот что хотел еще добавить: много раз замечал что то что ваяет InkScape потом гораздо лучше отображается во всех браузерах. Ну кроме ie - что там я просто не знаю, потому что вообще не ориентируюсь на него и у меня его нет, но имея ввиду "во всех" я еще и подразумеваю старую оперу на Presto

[Владимир Новицкий]

Suntechnic: в этом смысле все равно, что использовать, потому что я все равно потом прогоняю SVG-файлы через svgo-gui ( https://github.com/svg/svgo-gui ).

[teotlu]

Я пользуюсь Abode Illustrator, там всё само по умолчанию получается прозрачным. CorelDraw ненавижу давно и не без причины.

[Владимир Новицкий]

teotlu: возможно, но Illustrator лишних денег стоит.

[teotlu]

Novitsky: а CorelDRAW не стоит разве? Adobe сейчас весь по подписке, и стоит не запредельно много. Скажем так, если это один из основных инструментов для работы, то можно себе позволить.

[Владимир Новицкий]

teotlu: Corel уже купленный. А основной инструмент у меня Photoshop — 300 руб. в месяц. Если бы Illustrator столько же стоил, я бы подумал. Но платить 1500 руб. за подписку на пакет с кучей ненужного барахла, это накладно.

[teotlu]

Novitsky: ну тогда резонно, конечно. А разве в Corel есть какие-то проблемы с прозрачностью? Вроде не наблюдал таковых, когда пользовался.

[Владимир Новицкий]

teotlu: да нет, разобрался уже.
Но дело не в этом. По сути вопроса, так не должно быть. Стили правильные, SVG правильный. Это в Firefox проблемы.

[teotlu]

Novitsky: я обматерил всё, что мог, когда на неё наткнулся и пытался решить. И, что характерно, времени с тех пор прошло достаточно много, а проблема так и не решена.

[Владимир Новицкий]

teotlu: что самое интересное, не всегда так происходит. С некоторыми SVG нормально. Поэтому не понятно, какова причина. Проследить не удается.

[teotlu]

Novitsky: кстати, это очень странно. Баг достаточно серьёзный, и удивительно, что вопрос о нём практически нигде не обсуждался. По сути, это первое место, где я вижу его обсуждение.

Похожая ситуация у меня была с line-height. Я в какой-то момент обнаружил, что в Firefox текст в строке рендерится часто на пиксел выше, чем в других браузерах. Видимо, из-за округления. И пока я не нашёл хоть какую-то информацию про это, у меня было ощущение, что я что-то делаю неправильно и не по стандарту, поэтому так получается. А дизайнерам, между тем, очень хотелось, чтобы верх строки идеально совпадал с верхом картинки в абзаце во всех браузерах :)