Chrome Not Respecting Rem Font Size on Body Tag

Chrome not respecting rem font size on body tag?

Try:

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;  }

Seems to look better on refreshing the page :)

FIDDLE

rem units do not affect DIVs in Chrome - side-effect of minimum font size setting

Turns out Chrome has this setting - "Minimum font size" (chrome://settings/fonts?search=minimum). So if you manage to make the reference fontSize smaller than what is set there, whole rem logic will break.

Here's how it was set in the problematic Chrome.

Sample Image

Unexpected font size of textarea using rem in Chrome when setting root element font size to percentage

You are using percentage so its not specific like pixels, So its normal if you see different values of size's in different browsers.
i suggest you use a font base and use rem or % on that and try to use pixels and media query for responsive...

rem not outputing value relative to body font , em works fine

If you refer to the W3C spec, the rem unit is defined as:

Equal to the computed value of ‘font-size’ on the root element.

When specified on the ‘font-size’ property of the root element, the ‘rem’ units refer to the property's initial value.

Therefore, as per my comment, the rem bases its calculations off the font-size declared on the root element, i.e. the <html> element instead of the <body> element. As long as you declare font-size: 16px on the former, you will see that a correct padding will be calculated.

Inconsistent font size rendering issue on Chrome

body { font-size: 1.6rem;} might be your issue... you can axe that from your style.css and it should be more consistent. It looks like chrome might not like rem on the body as can be seen in the linked question

removing/changing the bad line from the following class definition in style.css should fix you up

body, button, input, select, textarea {
   color: #404040;
   font-family: sans-serif;
   font-size: 16px;
   font-size: 1.6rem;
   line-height: 1.5;
}

Chrome Not Respecting Rem Font Size on Body Tag