Chrome не учитывает размер шрифта rem на теге body?

В недавних проектах я использовал шрифты rem для масштабирования шрифтов, а затем использовал px как резерв для более старых версий IE.

Я также устанавливаю font-size 62,5% на html поэтому я могу более легко установить размеры шрифтов позже в таблице стилей, затем я устанавливаю размер шрифта 1.4rem на тело, поэтому элементы с неэкранированными элементами имеют базовый font-size не менее 14 пикселей, см. следующий код:

 html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */ body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; } 

Проблема в том, что Chrome, похоже, справляется с этим странным образом … Chrome, похоже, правильно задает размеры шрифтов при загрузке страницы, но при последующих обновлениях размер шрифта намного больше, чем должен быть.

СМОТРЕТЬ FIDDLE (HTML скопировано ниже для дальнейшего использования)

    Page Title   

This is a test, this font should have font-size of 14px.

This is a test, this font should have font-size of 14px.

This is a test, this font should have font-size of 14px.

Помните, что вам может понадобиться нажать один или два раза в Chrome, чтобы увидеть эффект.

Кто-нибудь знает, что вызывает это, или есть ли способ вокруг него? Я совершаю преступление, установив font-size 62,5% на элемент html (я понимаю, что есть аргументы против этого)?

Пытаться:

 html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */ *{font-size: 1.4rem;line-height: 1.6rem; } body { background: #fff; font-family: arial; } 

Кажется лучше выглядеть при обновлении страницы 🙂

FIDDLE

Самое простое решение, которое я нашел, – просто изменить определение тела на

 body { font-size: 1.4em; } 

Потому что это тело, вам не нужно беспокоиться о компаундировании – просто используйте rems везде.

Селектор * очень медленный, как автор этой ошибки в Chrome, я бы посоветовал обходное решение, подобное этому, до тех пор, пока ошибка не будет исправлена:

 body > div { font-size: 1.4rem; } 

Если у вас всегда есть обертка div;)

Кажется, это ошибка Chrome; см. Проблема 319623: проблема рендеринга при использовании% + REM в CSS и / или частично объединенный дубликат: Проблема 320754: размер шрифта не наследуется, если html имеет размер шрифта в процентах, а тело в rem

Да, это известная ошибка в Chrome, которая уже связана.

я нашел

 html { font-size: 100%; } 

кажется, работает для меня.

Способ, которым я это исправляю, – установить абсолютный размер шрифта в элементе body. Для всех других шрифтов я использую rem:

 html { font-size: 62.5%; } body { font-size: 14px; } .arbitrary-class { font-size: 1.6rem; /* Renders at 16px */ } 

Ответ Патрика прав. У нас такая же проблема на Android 4.4.3 WebView.

До :

 html { font-size: 62.5%; } body { font-size: 1.6rem; } 

После :

 html { font-size: 62.5%; } body { font-size: 1.6em; } 

С em и не rem , он работает!