Problem: Font sizes are rendering inconsistently on mobile Firefox and Chrome (see image below). This only occurs on certain pages but not others. Specifically, the em scaling is rendered differently on the two mobile browsers. I'm using @media queries to target mobile viewports and performing em scaling. On desktop font-sizes on both browsers are identical.
What I've Tried: I suspect the font-sizes are cascading differently, but it's hard to tell because some pages render just fine. I've applied CSS Reset and absolute px font-size on the body and em in its children and as suggested by answers of this question. I'm also using custom @fonts with declarations as follows:
@font-face {
font-family: 'tf0r';
src: url(../../client/typefaces/tf0r.eot);
src: url(../../client/typefaces/tf0r.eot?#iefix) format('embedded-opentype'),
url(../../client/typefaces/tf0r.woff2) format('woff2'),
url(../../client/typefaces/tf0r.woff) format('woff'),
url(../../client/typefaces/tf0r.ttf) format('truetype'),
url(../../client/typefaces/tf0r.svg#tf0r) format('svg');
font-style: normal;
font-weight: normal;
font-stretch: normal;
text-rendering: optimizeLegibility;
}
The answer to this question has been most helpful so far. Setting font-size-adjust: 1 property when applied to body does roughly scale up the pages that weren't rendering properly, but it also scales up other pages as well, making them obscenely large. I could target specific elements with this attribute, but I want to know if a more consistent solution could be found.
