Chrome will increase the font size when zooming out

Question

I have the following code :

CSS

#container{
    font-size: 0.625em;
}

#div1 {
    width: 200px;
    height: 200px;
    background-color: green;
}

#div2 {
    width: 20em;
    height: 20em;
    background-color: red;
}

HTML

<div id="container">
    <div id="div1">
    This is a test message.This is a test message.This is a test message.This is a test message.
    </div>
    <div id="div2">
        This is a test message.This is a test message.This is a test message.This is a test message.
    </div>
</div>

Chrome Version

Version 35.0.1916.153 m

When you zoom to 50% or smaller in Chrome, the size of the two divs will become different. If your check the font-size in dev tool, your will realize that Chrome automatically increased the font-size of the document.

Can anybody tell me why this happens? And how could I prevent it?

I am doing some research on the difference of em and px, so change the width of #div2 to 200px is not acceptable.

JsFiddle Link

Updated the content and source.

Thank you for your help.

Updated June 16th, 2014

Found something interesting and wanna share with you guys here.

If you had ever touched the "Advanced font settings" in Chrome, or using an default version(not Chinese or Japanese):

1. you will never be allowed to set font-size to some number smaller than 6px(in Chinese or Japanese version it will be 12px).

2. 1em will never go smaller than 6px(12px), when you measure something like "height" with "em".

3. if you set a text to 6px, and zoom to 50%, you may expect to see the text rendered like 3px(become to half). But the text will be set to 12px by chrome, and may break your layout.

Thanks to Dawar Husain. He helps me realize the minimum font size thing.

Answer 1

See, you used px for the first div and em for the second.

Chrome has a minimum font size and fonts smaller than it will be displayed as that font size only. (see your Chrome Settings)

Now, using div with px, the box goes on and becomes even smaller on zooming at 33% (or 25% or 50%) but using em, the box remains the same size when the minimum font-size has been reached. see

em is useful on browsers which implement zooming by scaling the font size like Chrome. So if you size all your elements using em they scale accordingly. em makes sure that the whole content is displayed as it is even if the size of div changes (on zooming). Hope you got your answer :)

EDIT

In IE10, there's no minimum font size in settings as in GC35. So the em px render like each other.

Answer 2

The divs has different width.

10em is not always equivalent to 100px

try setting the same width (em or px)

An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt

One pixel is equal to one dot on the computer screen

refer this page for documentation

your updated fiddle here

body {
            font-size: 0.625em;
        }

        #div1 {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        #div2 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

update

if it doesn't work try with this css property

-webkit-text-size-adjust: none;