Browser zoom affects element height
Reported by
rspi...@cormant.biz,
Mar 27 2018
|
|||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36 Steps to reproduce the problem: 1. Open the test case 2. Zoom out to 90% What is the expected behavior? Span height should remain at exactly 17 pixels. What went wrong? Span height changed from 17 to 18 pixels. Did this work before? N/A Does this work in other browsers? No In Firefox, the element heights are affected differently at different zoom levels. In Edge, I could not reproduce the bug. Chrome version: 65.0.3325.181 Channel: stable OS Version: 10.0 Flash Version: Zoom out to 67% to see div height change to 9.98438px, even though div height is defined via inline CSS as 10px. Also, when zoomed out to 67%, the span height returns to 17px, even though it had increased to 18px at 90% zoom. I'm not sure if this issue also affects element widths.
,
Mar 28 2018
rspivey@ Thanks for the issue. Able to reproduce the issue on Windows 10, Mac OS 10.12.6 and Ubuntu 14.04 on the latest Canary 67.0.3382.0 and Stable 65.0.3325.181 by following the given steps above. On opening the given index.html page and zooming in the page to 90%, can observe the Span height changed to 18 pixels and at 67% again returned to 17 pixels in windows and Ubuntu 14.04. In Mac OS , can observe the Span height changed to 19 pixels when zoomed to 90%. Attached is the screen cast for reference. This is a Non-Regression issue as this behavior is observed from M60 Chrome builds. Hence marking this as Untriaged for further updates from Dev. Thanks..
,
Mar 28 2018
Thanks for the report and test case. This is working as intended and is by design. When applying zoom the values are adjusted to match the device pixel grid of the display. At 90% zoom a 17px high element would be 15.3 device pixels. This is then adjusted to either 15 or 16 pixels to remain crisp (not adjusting it would result in blurry rendering). When querying using the offsetHeight API we always return the *rendered* value, not the requested value, so in this case if the height is rounded to 15px we would return 15/0.9 ~= 16.66667. If you instead want the precise underlying value that hasn't been rounded/adjusted for zoom the getBoundingClientRect().height API can be used.
,
Mar 28 2018
> If you instead want the precise underlying value that hasn't been rounded/adjusted for zoom the getBoundingClientRect().height API can be used. I've attached an updated version of the test case which uses getBoundingClientRect().height instead. The height measurements still report that the element height is affected by zoom. Is this expected?
|
|||||||||||
►
Sign in to add a comment |
|||||||||||
Comment 1 by viswa.karala@chromium.org
, Mar 28 2018