Height 100% IMG gets skewed when container resizes
Reported by
curtas...@gmail.com,
Oct 10 2017
|
||||||||||||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36
Steps to reproduce the problem:
1. Have a webpage like this.
<html>
<body>
<div id=outer style='height:100vh'>
<div style='height:50%'>
<img style='height:100%;' src='https://i.pinimg.com/236x/0f/9a/36/0f9a36457c046fe12c2c69ad60a3e737--creative-thinking-texture.jpg' />
</div>
</div>
</body>
</html>
2. Resize your browser to make it less tall. Or use javascript to make the outer div less tall.
3. Watch image get squished while width remains the same as it was before. Any image will do. Compare to Firefox and IE.
What is the expected behavior?
When the height of a IMG tag changes, the width should also change. The width is auto.
What went wrong?
On chrome only, when the image gets less tall, the width stays the same.
Did this work before? N/A
Chrome version: 61.0.3163.100 Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 27.0 r0
http://curtastic.com/test2.html
,
Oct 10 2017
,
Oct 11 2017
Test case: https://jsfiddle.net/8p675qq2/ resizing the window should preserve the aspect ratio of the image as in firefox.
,
Oct 11 2017
Able to reproduce this issue on reported version 61.0.3163.100 and oon latest canary 63.0.3236.0 using Windows 10,Ubuntu 14.04 ana Mac 10.12.6 with url given in comment#3 Good Build: 61.0.3136.0 Bad Build: 61.0.3137.0 You are probably looking for a change made after 480865 (known good), but no later than 480866 (first known bad). CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/2f2ac9ae32ee007ad44c28ba6836cd5be599a4c7..576afe625d7fcabf82a2321757c50f4205cbff2f Reviewed-on: https://chromium-review.googlesource.com/533796 Suspecting same above CL. @fserb: Please confirm the issue and help in re-assigning if it is not related to your change. Adding RB-Stable as this is a recent regression. Please change if not the case. Thanks!
,
Oct 11 2017
Lol. No way. :) Your bisect is way off. If you are able to reproduce on 3163 (and I was), then that's not the good build, right? I think this is not a regression at all. At least I couldn't find a working build and Safari stable has the same behavior as Chrome stable. This is very CSS weird, let's try to get to the bottom of it. Adding some more people. @meade, could someone on your team take a look at this? There's a difference in behavior for Safari/Chrome and Firefox/IE. Maybe it's a spec issue, maybe it's an implementation issue. Either way, it's a bit messy.
,
Oct 12 2017
It sounds like this has probably been around for a while. Adding it to our interop bug pool.
,
Oct 12 2017
,
Oct 31 2017
,
Dec 6 2017
,
Jan 4 2018
Is there any update on this issue? I would like to work on it.
,
Jan 5 2018
No updates. Please go ahead.
,
Jan 7
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jan 10
Still broken, both in legacy and NG.
,
Jan 21
(2 days ago)
Interesting http://curtastic.com/test2.html works on my Mac Version 71.0.3578.98 fails on Linux Version 71.0.3578.98 fails on Tip in NG and Legacy. I've been through a bunch of similar bugs recently, will take a look. Nice test case.
,
Jan 21
(2 days ago)
Thanks atotic. I was wondering why google didn't jump on this and fix it then I realized people probably aren't getting paid to fix these. I reported another bug that might be similar, if you want to check it out as it also isn't fixed https://bugs.chromium.org/p/chromium/issues/detail?id=778366 |
||||||||||||
►
Sign in to add a comment |
||||||||||||
Comment 1 by alph@chromium.org
, Oct 10 2017