Viewport-Unit Font-Size and Zooming Bug: Which Browsers Are Affected

Chrome does not keep consistent rem units on zoom-in

The solution I found was to simply multiply the original font-size by 2, and then divide all rem sizes by 2 as well, because then the font-size at 50% will be 7px again. In other situations, that may not work, but repeating this trick again might fix

The problem seems to be that Chrome decides that its rendered font sizes cannot be less than 3px, which means that any font size below 12px will gradually creep towards being rendered at 3px, but will never shrink to smaller than that.

window.onresize = function() {  console.log(getComputedStyle(document.body.parentElement, null).getPropertyValue("font-size"));}

html {    font-size: 14px;}body {    font-size: 1em;}.box {    width: 5rem;    height: 5rem;    background: red;}

<html>    <head>    </head>    <body>        <div class="box"></div>        <p>foo bar baz</p>    </body></html>

Keeping text size the same on zooming

You actually can get around zooming by using viewport units. Here's the fiddle: http://jsfiddle.net/TnY3L/. Also, I did my personal website using viewport units and no zooming works on it when you use Ctrl + or Ctrl - keys (see http://www.functionalcss.com/). Older browsers do not support vw, vh, vmin, vmax. I got around it by using a polyfill: http://html5polyfill.com/

HTML:

<div id = "header">This is a header</div>

CSS:

#header {
    background-color: #ccc;
    height: 10vh;
    line-height: 10vh;
    font-size: 5vh;
    text-align: center;
}

What happens when the user sets the browser font size?

The user-defined font size determines the base font size of the root element html. The initial value of font-size as specified by CSS is medium, which in all desktop browsers corresponds to this user-defined size (except Microsoft Edge which follows Windows DPI and accessibility settings rather than having its own). Mobile browsers don't seem to honor the system-wide preference typical of mobile devices, unfortunately. At least, none of Safari on iOS, Internet Explorer on Windows Phone 8.1 or Microsoft Edge on Windows 10 Mobile do.

All other keyword values of the font-size property defined here are scaled to this size, so if the user-defined size is 20px, medium corresponds to 20px and small will almost certainly correspond to a size smaller than 20px.

Media query rems and ems are calculated directly off of this user-defined size, irrespective of the specified font-size property of the root element. Each of the following media expressions:

(max-width: 30rem)
(max-width: 30em)

is equivalent to (max-width: 480px) when the user-defined size is 16px, and (max-width: 600px) when the user-defined size is 20px.

Style rule rems on the other hand are calculated off of the specified font-size of the root element. The following rule:

:root { font-size: 50%; }

makes 1rem in a style rule equivalent to 8px when the user-defined size is 16px, and 10px when the user-defined size is 20px.

Style rule ems and percentages are always calculated relative to ancestor elements so their behavior doesn't change. If the font size of body is declared in ems or percentages then it'd be based off of whatever the font size of html (its parent) is, for example. So on and so forth for all its descendants that don't specify some other size.

The px unit corresponds to a CSS pixel and so its metrics are never affected by the user-defined font size.

The behavior of viewport units and calc() doesn't change, since none of those things depends on an element's font size. As their name suggests, viewport units scale to the size of the viewport.

The most noticeable overall effect this can have on a layout that sizes everything (including widths and heights of boxes) in rems and ems, is that the user can scale the entire layout just by changing their preferred font size. I don't know how useful this is anymore, especially when zoom is a thing.

So, to ensure that your copy is able to accommodate the user's preferred font size without forcing them to zoom, specify all your font sizes in rems or ems where possible. Especially do not specify a pixel font size on html, as that will override the preference completely. You don't necessarily have to specify widths and heights in rems or ems — this really depends on your layout. Not all fluid layouts scale well with different sizes. The most important aspect of this, really, is the size of text, since this feature is intended to scale text to improve readability.

Viewport-Unit Font-Size and Zooming Bug: Which Browsers Are Affected

Chrome does not keep consistent rem units on zoom-in

Keeping text size the same on zooming

What happens when the user sets the browser font size?

Related Topics

Leave a reply