Почему rem'ы работают так при размере шрифта в html в процентах (в Chrome)?
Ранние попытки решить проблему.Как уже заметили (спасибо большое за это) данная проблема замечена только в 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!
Открыла консоль, посмотрела. 
При html {
  font-size: 6.25%; /* (100% * 1px / 16px = 6.25 | 1rem = 1px) */
}
в консоли написано font-size: 6px.
Поставила 4%, результат аналогичный. 
Вывод: хотите меньше 6px, пишите в пикселях, а не в %%. Браузер стоит на страже читаемости букв :)
Соответственно, margin и получился 6px умножить на 16 = 96.