REM units doesn't work good in Android 2.* and Web View (until Android 4.2) Native Browser

Issue

This is a bug I searched quite a long time, and didn't find nothing about it.

In one of my project that I'm Working on, I started to use REM Units. in every element that have text, I'm giving font-size & line-height.

I don't Know why but somehow it doesn't understand the line-height with REM and act like it is without REM.

html{
  font-size:1px;
}

.fu{
  font-size:20rem;
  line-height:24rem;/*old android, act like 24 without the REM Unit*/
}
/*normal browser - line-height 24*1 = 24px(root-font-size)
old android browser and webview line-height 24 * 20(font-size) = 480px*/

LIVE EXAMPLE (watch in desktop and old android)

I'd be happy for a suitable solution which enables me to use REM units in line-height.

Solution

Yo can't use rem line-height in android 2.*

The Solution:

Use multiple of the font size

Example

html{
  font-size:1px;
}

.fu{
  font-size:20rem;
  line-height:1.2; /*1.2 equal to 24rem(in this case) and will resolve conflict in old android*/
}

Answered By - Elad Shechter