Почему rem'ы работают так при размере шрифта в html в процентах (в Chrome)?

Question

[ZaxapKramer]

Здравствуйте. Вот смотрите, есть у нас такая горстка стилей, допустим:

html {
  font-size: 62.5%; /* (100% * 10px / 16px = 62.5 | 1rem = 10px) */
}

body {
  font-size: 1.6rem; /* 16px */
  margin:    1.6rem; /* 16px */
}

Тогда почему нельзя использовать rem'ы аналогично пикселям (1rem = 1px)? Можно:

html {
  font-size: 1px;
}

body {
  font-size: 16rem; /* 16px */
  margin:    16rem; /* 16px */
}

Давайте зададим размер шрифта в html в процентах, но немного иначе, все должно работать также, как и в предыдущем случае:

html {
  font-size: 6.25%; /* (100% * 1px / 16px = 6.25 | 1rem = 1px) */
}

body {
  font-size: 16rem; /* 16px */
  margin:    16rem; /* 96px - WAT!? */
}

Должно... но почему это не так? В чем причина такой странной работы rem, как единиц измерения?
1rem = 1px, но только для размеров шрифта, для margin же 1rem = 6px... В чем причина такого парадокса?

P.S. Все приравнивания rem к px крайне приблизительны. Не нужно указывать на эти утверждения, как на ошибку.

P.P.S. Данная проблема только в Chrome, в Firefox все работает, как надо...

Проблема решена! Ответил в комментариях.

Comments

[Aleksandr]

Изврат какой-то

[ZaxapKramer]

Александр Котов, почему же?
Про font-size: 62.5% - так многие делали и делают... По-мне, это хорошо:)
Про font-size: 6.25% - почему нельзя хотеть использовать rem аналогично px? Это же удобнее...
Другой вопрос в том, что оно "странно" работает...

[Aleksandr]

ZaxapKramer: не понимаю для чего задавать именно в %

[ZaxapKramer]

Александр Котов, так делали раньше для Retina и экранов с высокой плотностью (dpi и т.п. слова).
Где 10px != 10px, но 62.5% = 10px (именно визуально).
Я - тот еще динозавр, так что, возможно, эта "проблема" уже много лет, как отпала, либо я не совсем верно понимаю ее.

[Aleksandr]

ZaxapKramer: спасибо за пояснение

[ZaxapKramer]

Александр Котов, не за что. Вчера задался вопросом актуальности, сегодня нашел хорошую статью. Полагаю, Вам (да и некоторым из тех, кто читает комментарии), будет интересно.

Answer 1

[ZaxapKramer]

Ранние попытки решить проблему.

Как уже заметили (спасибо большое за это) данная проблема замечена только в Chrome.
Придумал задать стили вот так, работает, как ни странно:

html {
  font-size: calc(6.25% + 1px - 1px) /* (100% * 1px / 16px = 6.25 | 1rem = 1px) */
  /* 6.25% + 1px - 1px = 6.25%, логично, забавно */
}

body {
  font-size: 16rem; /* 16px */
  margin:    16rem; /* 16px */
}

Либо так - тоже работает:

html {
  font-size: calc(6.25% + 0px) /* (100% * 1px / 16px = 6.25 | 1rem = 1px) */
  /* 6.25% + 0px = 6.25%, все также логично, только еще проще и "страннее" */
}

P.S. В IE оно каким-то боком крашится: font-size: 0.3px. Даже font-size: calc(6.25%), который везде равен 6.25% (в хром, конечно же, не меньше 6px), равен там 0.3px.

P.P.S. Данный хак можно применить только для Chrome (webkit) одним из таких способов:
browserhacks.com/#ch

Окончательное решение было найдено совершенно случайно. От части, на просторах интернета, от части, из проб и ошибок при попытках решить проблему.

/* Использование em вместо % */
html {
  font-size: 6.25%; /* (font-size: .0625em) на всякий случай */
  font-size: calc(1em * .0625)
}

Почему не .0625em? Это объясняется багом в IE, в котором единицы высчитываются неверно.
В добавок, таким образом исправляется баг (фича) в webkit-браузерах, описанный подробнее в ответе Ankhena W, за что ей спасибо.

Теперь мы можем использовать rem подобно px! Just use It!

Answer 2

[Ankhena]

Открыла консоль, посмотрела.
При

html {
  font-size: 6.25%; /* (100% * 1px / 16px = 6.25 | 1rem = 1px) */
}

в консоли написано font-size: 6px.
Поставила 4%, результат аналогичный.
Вывод: хотите меньше 6px, пишите в пикселях, а не в %%. Браузер стоит на страже читаемости букв :)

Соответственно, margin и получился 6px умножить на 16 = 96.

Comments

[ZaxapKramer]

Я сделал то же самое, поэтому и задался вопросом... Если бы браузер стоял на страже читаемости букв, то последующие font-size: 1rem были бы равнозначны font-size: 6px, но это не так. А вот с margin все именно так...

[Ankhena]

ZaxapKramer: ФФ считает так, как вы хотите, вебкит нет.

По поводу вебкита думаю, что алгоритм расчета другой. Берет для html 6,25%, но не может сделать меньше 6px, ставит 6px. Для body снова начинает расчет, получает нормальное значение и его и использует.

А вообще не понимаю, зачем размер шрифта для html задавать в процентах. Есть фиксированный размер шрифта у браузера, верстальщик в состоянии самостоятельно посчитать %% и поставить его фиксированным в px, а не грузить браузер пусть крошечным, но лишним действием.

[ZaxapKramer]

Ankhena W, так делали раньше для Retina и экранов с высокой плотностью (dpi и т.п. слова).
Где 10px != 10px, но 62.5% = 10px - создается такая видимость.
Я - тот еще динозавр, так что, возможно, эта "проблема" уже много лет, как отпала, либо я не совсем верно понимаю ее.

P.S. Нашел хорошую статью, которая раскрывает данный вопрос более явно.