Created attachment 214548 [details] Shows 2 HTML elements with their pre calculated height, run time calculated height and actual height. Steps to reproduce the problem: 1. Go to http://dotnetcarpenter.bitbucket.org/bugz/rem-bug/ 2. Resize the window to a smaller size. 3. Watch the height text inside the blue and green squares - at some point, all rem scales are askew. Or on a small screen device, e.i. iPhone/Android phone: 1. Go to http://dotnetcarpenter.bitbucket.org/bugz/real-example/ 2. Notice that the right pointing arrow will drop down below the other controls. 3. Touch the histogram icon 4. The icon legend to the right of the screen is rendered on top of the histogram bars. What is the expected behavior? Go to the aforementioned URI's with a gecko based browser. Scaling should always be correct. What went wrong? As demonstrated in the attached test case and on the live links, webkit browsers stop down-scaling correctly at a certain point. Did this work before? I don't know. Any other comments? This is observed on iPhone Safari iOS6, Android stock browser 4.0.4 and 4.2.2, Chrome 30 for Android, and Opera 16. webkit doesn't seem to having any issues with up-scaling content. As seen in the second attachment: rem-height-workaround.html I've also commented on a similar issue in the webkit bug tracker: https://bugs.webkit.org/show_bug.cgi?id=117680
Created attachment 214549 [details] Test-case shows that up scaling is not an issue
Created attachment 214550 [details] A real example of the issue Can be used as a test case when the reduced test case passes.
-webkit-text-size-adjust:none; might solve the issue. But haven't checked since this means going through hundreds of lines of SASS to change the factor.