Как поправить рендеринг текста в хроме?

Question

[Jack London]

Во время верстки очередного проекта столкнулся с проблемой отображения текста в браузере хром. В остальных браузерах, даже микрософт все норм. Эта проблема не зависит от выбранного шрифта или способа его подключения.

Меняется грубо говоря только position у родительского блока, а текст каким то чудом меняет толщину, чего не должно быть. Вопрос, что это за баг такой и как его пофиксить.

Comments

[origami1024]

Протестировал твой код в https://jsfiddle.net/mqfLpc0z/ - всё нормально. Создал отдельную страничку - тоже всё нормально. Может у тебя расширения какие-то установлены?

[Jack London]

origami1024, прочитал коммент, думаю действительно голова) проверил инкогнито, та же проблема.

[origami1024]

Jack London, скриншот хоть реальный приделай, это ты в пэинте нарисовал походу?

[Jack London]

origami1024, так а смысл рисовать? это виндоус принтскрин через окно + шифт + s

[Jack London]

origami1024, в jsfiddle у меня все тоже отлично

[origami1024]

Почему размер текста такой маленький тогда? на 30px не тянет никак

[Jack London]

origami1024, это у меня на сайте, там 18 изначально

[origami1024]

Jack London, ну значит там какой-то другой код перекрывает, попробуй воспроизвести баг в jsfiddle

[Jack London]

origami1024, воспроизвел, в общем и в jsfiddle у меня эта проблема есть. Если открыть инспектор, выбрать блок parent и включать и выключать свойство position: fixed; то видно как толщина текста меняется. Причем запускаю в режиме инкогнито

[origami1024]

Jack London, хмм, у меня тоже есть такой "баг". Почему происходит хз, может кто-то более знающий расскажет

[origami1024]

Вот обгрейдженая фидла - с кнопочкой.
Предлагаю включить фидлу в вопрос, так как она сразу показывает баг
https://jsfiddle.net/oL85x93a/1/

[origami1024]

origami1024, ну меня можно не упомянать, это лишняя инфа, если что в комментариях найдут. Лучше включить фидлу не линкой, а через

[Jack London]

origami1024, ок)

Answer 1

[Jack London]

transform: translate3d(0,0,0);

Если добавить это свойство для дочернего элемента .child, тогда все будет работать нормально, по крайней мере толщина текста при смене position меняться не будет. Хотя я все равно не понял, почему это происходит в хроме, но такой костыль считаю пока лучшим решением.

Answer 2

[xmoonlight]

Сбросьте все дефолт-стили и/или пропишите для .parent h1 стиль принудительно.

Comments

[Jack London]

xmoonlight, проблема не в стилях, стили все работают как и должны работать, меняется только отображение текста в браузере по непонятным причинам, причем только в хроме, даже если сделать чистую тестовую страницу с кодом выше.

[xmoonlight]

Jack London, у меня была проблема с зазором в 1px/0px (через раз, в зависимости от чётности точек по высоте!) и тоже только исключительно в хроме.
Ничего не помогло: пришлось цвет фона ставить одинаковым...