Две ссылки, находящиеся рядом, по-разному отрисовываются в 100% масштабе браузера Chrome. В чём может быть проблема?

Question

[Антон Губарев]

Вот подопытные:


На обеих ссылках одинаковый класс линка, соответственно задан один цвет, размер и прочее. Однако рендер браузера к верхней ссылке добавляет какой-то однопиксельный шлейф, который влияет на итоговый цвет 100%-ого масштаба.

Вот что происходит при смене цвета:


При увеличении масштаба шлейф пропадает:


В Firefox всё в порядке:



Проблема сохраняется и на OS X и на Windows. Подопытный браузер хром последней версии (44.0.2403.157 (64-bit)).
Подскажите, как в итоге сделать шрифты одинаковыми?

Answer 1

[Vladislav Dragalev]

Попробуйте добавить к классу text-rendering: optimizeLegibility;

Comments

[Антон Губарев]

Безрезультатно.

[Антон Губарев]

Оу, простите, проверял на OS X. Тестану Win.

[Vladislav Dragalev]

Антон Губарев: а вообще изменение параметра text-rendering влияет на отображение?

[Антон Губарев]

Vladislav Dragalev: на винде тоже никаких измнений

Answer 2

[Антон Губарев]

У этих двух ссылок разница лишь во вложенности, всё остальное одинаковое.
Оказалось, что на цвет влияет лишь position: relative у родителя.
Первый с ним, второй — без него. Походу остаётся только писать в гугл.

Comments

[Антон Губарев]

Подсказывали ещё вот такую штуку прописать, но тож безрезультатно:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: none;