srcset images don't update on size changes
Reported by
calki...@gmail.com,
Apr 26 2018
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36 Steps to reproduce the problem: 1. Include a element img in a normal html. ex. <a href="https://addons.mozilla.org/"> <img src="firefox-addons400.jpg" alt="Customize Firefox with add-ons" srcset="firefox-addons-120w.jpg 120w, firefox-addons-400w.jpg 400w" sizes="(max-width: 480px) 120px, 400px"> </a> 2. Try to explore this element over developer tools, using device toolbar to change de width. 3. At Network tab, check what images are being downloded. What is the expected behavior? When device width is less than 480px the image firefox-addons-120w.jpg should be downloaded, or when the device width is grater than it, the firefox-addons-400w.jpg should be downloaded. What went wrong? The browser is ignoring the width before process what images should be downloaded, thus responsive behavior is harmed. Did this work before? No Chrome version: 66.0.3359.117 Channel: stable OS Version: 10.0 Flash Version:
,
Apr 27 2018
Unable to reproduce this issue on reported version 66.0.3359.117 using code given in comment#0 , https://www.w3schools.com/code/tryit.asp?filename=FQRD6E39EY0V. But not seeing image as shown in above screenshots. @Reporter: Please check the screenshot and let us know if we miss anything. Please provide sample files on which issue is reproducible for further triaging from TE end. Thanks!
,
Apr 28 2018
I changed the relative link to absolutes, and hosted the images at imageshack. Anyway, the tools "tryit" from w3schools.com does not support srcset attribute's img element,but I suggest you to try it inside a text file pre-formatted to HTML, like: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <img srcset="https://imageshack.com/a/img922/1904/ierfn3.png 200w, https://imageshack.com/a/img923/574/0tIMV3.png 300w, https://imageshack.com/a/img924/4140/OKvXlf.png 400w" sizes="(max-width: 300px) 200px, (max-width: 400px) 300px, 400px" src="https://imageshack.com/a/img923/574/0tIMV3.png" alt="Default image 400-500w"> </body> </html> after save the text, you could open it on Chrome and change de width of broswer.. it does not change images accordly; On the other hand, if you open the same code in a Firebox broswer you could see that images changes according browser width. (see the Behavior and expectedBehavior screen shoots). Ps: I added a html file that you could use to test.
,
Apr 28 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
May 7 2018
Can someone help with this issue?
,
May 8 2018
Able to reproduce this issue on reported version 66.0.3359.117,on latest canary 68.0.3424.0 using Mac 10.13.3, Windows 10 and Ubuntu 14.04. i.e; On changing the width and on refreshing the page, images doesn't change accordingly with file attached in comment#4. NOTE:Issue is working fine in Firefox. This issue is seen from M-60. Hence considering this issue as Non-Regression and marking as Untriaged. Thanks!
,
May 10 2018
It's not related to device mode in DevTools. With DT closed still does not display the correct image when I resize the window.
,
May 11 2018
I thought we had a duplicate of this, but not the case. |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by krajshree@chromium.org
, Apr 27 2018