Размытые значки шрифтов, когда родительский контейнер имеет маржу auto

Question

Этот «просто очередной размытый значок» начинает приносить мне серьезные головные боли, поэтому я решил попросить о помощи здесь. И поверьте, я уже прочитал все «размытые значки» в Интернете.

На приведенном ниже рисунке показано, что происходит с значками шрифтов на github.com при изменении размера браузера, переходе между нечетными и четными значениями.

Но проблема возникает из-за чего-то другого, он исходит из какого-то родительского элемента (.container), который центрирует себя, используя свойства margin-left/right, заданные как «auto».

Все значки правильно выравниваются по сетке, все они имеют сглаживание шрифтов: антиализованы, а шрифт SVG уже перемещен перед .ttf. Нет, это не одна из этих проблем. Это строго связано с тем, как браузеры отображают значки шрифтов, когда у вас есть центр родительского контейнера, выровненный с помощью margin auto.

Любые идеи, как исправить это, не изменяя свойство margin самоцентрирующегося родительского контейнера?

Answer 1

Борясь с той же проблемой сам. По крайней мере, в моем случае это похоже на то, что горизонтальное положение символа значка заканчивается под субпиксельным значением (например, на 99,5 пикселей вместо 100 пикселей). Это может быть вызвано множеством различных ситуаций, таких как горизонтальное центрирование (как в вашем случае).

К сожалению, я не знаю обходного пути, кроме настройки горизонтальной позиции значка в каждом конкретном случае, например. используя край субпикселя, который корректирует положение значка обратно в сетку пикселей (например, margin-left: 0.25px).