Bug 94013 – When zooming in page, borders with em units scale up too much

• Status: UNCONFIRMED
• Component: CSS

[Markus Amalthea Magnuson]

Created attachment 158392 [details]
Screenshot showing the incorrect zoom behavior of a 1em content box with a 1em border.

1. Go to http://jsfiddle.net/m6cFE/1/
2. Zoom in the page a few times (e.g. cmd+)
3. The 1em content box will have scaled up correctly, but the 1em border will incorrectly have scaled up too much.

Since both content box and border is 1em, they should scale the same amount when zooming. Instead, the border scales up too much.

Attached is a screenshot showing the 1em content box with a 1em border, with page zoom at 125% (approximately, since I can't find out how to see the current zoom level in Safari/WebKit).

Obviously the border has become larger than the content box, even though they should be the same.

[Markus Amalthea Magnuson]

The behavior is observed (and the screenshot is from) the latest nightly build of WebKit (r125269).

[Zack Liscio]

Found another good example where this happens, including two Tinkerboxes (one with EM sizing, one with Pixels) as well as a link to the StackOverflow discussion that surfaced this:

Working (pixels):

http://tinkerbin.com/FR9sQpkZ

Not working (EMs):

http://tinkerbin.com/9rMTZgdg

Stack overflow thread:

http://stackoverflow.com/questions/14300225/less-css-ribbon-breaks-in-chrome-on-resize/14307236?iemail=1#14307236