rem unit does not scale well

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Zbychu]

Created attachment 204787 [details]
html and css example

Hi,

When I want to replace the old unit the size of a new, and when I prescaling the window size, rem is not precise. Examle below.

1px when converting to rem is invisible.

Firefox and IE10 scaling pretty good.


body {
font-size:62.5% /* ==> 10px */
}

div {
border: .1rem solid red /* ==> 1px */
}

screenshot:

chrome 27 default site (100% view)
http://d.pr/i/FmOe

chrome 27 (Ctrl+ + [90% view])
http://d.pr/i/bhHS

firefox resizing
http://d.pr/i/nS43

Created attachment 214434 [details]
Shows 2 HTML elements with their pre calculated height, run time calculated height and actual height. This works as intended in Gecko but fails in all webkit based browsers.

Shows 2 HTML elements with their pre calculated height, run time calculated height and actual height. This works as intended in Gecko but fails in all webkit based browsers. In this particular test-case and bug materialize itself when the font size is scaled below 57%.

@Zychu It's unclear what you mean by "prescaling the window size". Do you mean resizing the window or resizing the text by Command/CTRL +/-?

But I can confirm that this is indeed a bug. It seems to affect all webkit based browsers, Safari, iOS, Chrome, Opera, Android ect.

See the attached test-case: https://bugs.webkit.org/attachment.cgi?id=214434

This bug report seems unattended, meaning that no one is paying attention to comments. I therefore have created a new bug report #123012 to regain attention.

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.