getBoundingClientRect reports double size for foreignObject children on a HiDPI monitor
Reported by
yurivk...@gmail.com,
Jun 29 2017
|
|||||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:54.0) Gecko/20100101 Firefox/54.0 Steps to reproduce the problem: 0. Find an X11/GNU/Linux machine with a HiDPI monitor. $ xdpyinfo | grep -B2 resolution screen #0: dimensions: 3840x2160 pixels (508x286 millimeters) resolution: 192x192 dots per inch 1. Create an HTML document. 2. Add an `svg` child element to its body. 3. Add a `foreignObject` child element to the `svg` element. 4. Add any HTML child element to the `foreignObject` element. 5. Attempt to measure the rendered size of that HTML element by invoking its `getBoundingClientRect`. What is the expected behavior? The position and size of the element are reported in CSS pixels, consistent with how they are reported for an HTML element outside SVG. The two sizes in the test case should be identical or very close. What went wrong? The position and size seem to be reported in physical device pixels. On my machine, the HTML-only `div` is sized 79.14×18.5, while the `div` in `foreignObject` in `svg` is sized 158.3×36, about twice as large in each dimension. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 59.0.3071.115 (Official Build) (64-bit) Channel: stable OS Version: Ubuntu 16.04 Flash Version: Shockwave Flash 26.0 r0 In Firefox 54, both elements are sized 72×21. In Chromium 61.0.3145.0 (Developer Build) (64-bit), the problem persists.
,
Jul 6 2017
Tested this issue using latest stable #59.0.3071.115 on Win 10, Mac 10.12.5 and Linux Ubuntu 14.04 and observed div and foreignObject` in `svg are showing same size. @yurivkhan: Could you please find the attached screenshot and let us know your observations for further triaging of the issue. Thanks!!
,
Jul 6 2017
@sandeepkumars: That screenshot looks like usual 96 dpi. I believe the problem specifically manifests at 192 dpi and other high pixel densities, and possibly depends on the windowing system. Please, when triaging this bug, keep step 0 in mind.
,
Jul 6 2017
Thank you for providing more feedback. Adding requester "sandeepkumars@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jul 6 2017
Confirmed.
,
Jul 6 2017
,
Jul 7 2017
,
Jun 7 2018
Any update on this? getBoundingClientRect still returns values that are not properly scaled with devicePixelRatio.
,
Jun 7 2018
The current situation is that the SVGForeignObject returns values that are zoomed by the current zoom factor, while the HTML div does not (reports unzoomed values). On platforms not using hidpi-as-zoom (Mac and Android) the situation may well be different. So basically it looks like the problem remains despite lots of fixes for foreign object recently.
,
Jun 8 2018
It seems strange that SVGForeignObjects would just act differently. Is there a reason for this disparity or is it simply a bug? If the latter, is the root cause complex and hard to solve, or has there just not been cycles dedicated to this issue?
,
Jun 8 2018
foreignObject is special (not the good kind.) In this case likely because it exists within an <svg>, and thus are subjected to special handling when it comes to zooming. Remains to be seen if this issue stems from that though of course, but it seems quite likely. Definitely a bug though.
,
Jun 8 2018
The culprit is likely this: https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/css/resolver/style_resolver.cc?l=1863
,
Sep 11
Issue 882899 has been merged into this issue. |
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by kochi@chromium.org
, Jun 30 2017