s-hunter s-hunter - 5 months ago 24
CSS Question

Inconsistent font size rendering issue on Chrome

I am having an css issue on my site. The font size is not consistent across all pages. The difference is one version of bigger font size and one version of a regular small font size. The small font size is the one I prefer. If the page is showing the content in big font, it will change it back to a smaller one after reload the page for a couple of times, it also changes back to the smaller one right away if you right click and select inspect element. Thus, I am not sure how can I ping point the issue.
Here are the screenshots, one with the big font and one with the small font, and again the small font is the one I prefer.
the big font

the small font

Answer

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

Similar SO question

Text + good links from answer on other question:

"This seems to be a Chrome bug; see Issue 319623: Rendering issue when using % + REMs in CSS, and/or a partly-merged duplicate: Issue 320754: font-size does not inherit if html has a font-size in percentage, and body in rem"

Comments