Эта «просто еще одна проблема с размытыми значками» начинает вызывать у меня серьезные головные боли, поэтому я решил обратиться за помощью сюда. И поверьте мне, я уже прочитал все статьи о размытых значках в Интернете.
На изображении ниже показано, что происходит со значками шрифтов на github.com, когда вы изменяете ширину браузера, переключаясь между нечетными и четными значениями.
Но проблема возникает откуда-то еще, она возникает из-за какого-то родительского элемента (.container), который центрирует себя, используя свойства margin-left/right, установленные на 'auto'.
Все значки правильно выровнены по сетке, все они имеют сглаживание шрифта: сглаживание, а шрифт SVG уже перемещен перед шрифтом .ttf. Так что нет, это не одна из этих проблем. Это строго связано с тем, как браузеры отображают значки шрифтов, когда у вас есть центр родительского контейнера, выровненный с помощью margin auto.
Есть идеи, как это исправить, не меняя свойства поля самоцентрирующегося родительского контейнера?
