Issue metadata
Sign in to add a comment
|
Dev tools show incorrect natural dimensions for responsive images
Reported by
oliverj...@gmail.com,
Nov 23 2017
|
||||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36 Steps to reproduce the problem: 1. View a responsive image on a DPR 2 device 2. Inspect the img Example: 1. Go to http://output.jsbin.com/wakofi/2/quiet 2. Open dev tools and use device mode to emulate a DPR 2 device 3. Refresh 4. Inspect the img What is the expected behavior? The "natural" dimensions should show the image's "actual" dimensions. In this example, 1000px x 1000px. What went wrong? In this example, the natural dimensions show as 500px x 500px. Did this work before? N/A Chrome version: 62.0.3202.94 Channel: stable OS Version: OS X 10.13.1 Flash Version: I believe dev tools is just returning the values of the `natural{Width,Height}` properties on the image element. As for why they return these values, there is a separate issue: https://bugs.chromium.org/p/chromium/issues/detail?id=760612 Outside of that issue, I also think this is a bug specific to dev tools. The dev tools are often used to test whether responsive images are working, by validating the correct image size was downloaded. At the moment, the information surfaced related to this is potentially misleading. I think many people would consider "natural" to refer to the image's "actual" size. Perhaps dev tools should drop its usage of the (misleading) natural dimension properties in favour of "actual" dimensions. Possibly related https://bugs.chromium.org/p/chromium/issues/detail?id=630552.
,
Nov 24 2017
,
Nov 24 2017
Thank you for providing more feedback. Adding requester "divya.padigela@techmahindra.com" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Nov 27 2017
,
Jun 6 2018
Thanks for the report. After reading the threads on the linked crbugs, it seems that there may be a spec bug, as many commenters have noted that the naturalWidth is not expected. Merging this with the naturalWidth/Height bug.
,
Jun 6 2018
Given that the behaviour of `natural{Width,Height}` is correct as per https://bugs.chromium.org/p/chromium/issues/detail?id=760612#c4, maybe we shouldn't merge this issue with that one. This is a bug, whereas https://bugs.chromium.org/p/chromium/issues/detail?id=760612 is just confusion about how these properties should work.
,
Jun 6 2018
Ah, perhaps I was confused, I could not tell whether comments #2 and #4 intended to change the way natural{Width,Height} is reported.
It sounds like the real problem is that DevTools does not report the "intrinsic size", which is the expected 1000x1000. I can reopen and investigate.
,
Oct 6
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/a73757aba48e30c90833b13576c15fba83c90f77 commit a73757aba48e30c90833b13576c15fba83c90f77 Author: Erik Luo <luoe@chromium.org> Date: Sat Oct 06 03:42:35 2018 DevTools: report correct image sizes in popover Instead of showing offset, naturalW/H in image preview popover, - Rendered size: better than 'offset', which includes unwanted padding, border. - Intrinsic size: based on the natural size when loaded by DevTools without any density descriptor, also the original resource size. OffsetW/H is no longer shown, but info available in the box model and overlay highlight. Bug: 788114 , 801218 Change-Id: I6ec08c5bcd62c0cb3d8815a1d7079cccb022ef5d Reviewed-on: https://chromium-review.googlesource.com/c/1256072 Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org> Commit-Queue: Erik Luo <luoe@chromium.org> Cr-Commit-Position: refs/heads/master@{#597404} [modify] https://crrev.com/a73757aba48e30c90833b13576c15fba83c90f77/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-img-tooltip-expected.txt [modify] https://crrev.com/a73757aba48e30c90833b13576c15fba83c90f77/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-img-tooltip.js [modify] https://crrev.com/a73757aba48e30c90833b13576c15fba83c90f77/third_party/blink/renderer/devtools/front_end/components/ImagePreview.js [modify] https://crrev.com/a73757aba48e30c90833b13576c15fba83c90f77/third_party/blink/renderer/devtools/front_end/elements/ElementsTreeOutline.js
,
Oct 8
|
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by divya.pa...@techmahindra.com
, Nov 24 2017Labels: Triaged-ET Needs-Triage-M62 Needs-Feedback
2.2 MB
2.2 MB View Download