inline-block element not sizing when img with width: auto height: auto resizes |
|||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 Steps to reproduce the problem: visit http://codepen.io/aghassemi/pen/BWvQON has demo and details. it works correctly in webkit/FF. What is the expected behavior? What went wrong? Chrome does not seem to re-layout the parent of the `img` as the width of the image changes based on its height. If you inspect the `img` in DevTools, you will see it clearly changes width, however the parent does not update to reflect the new width of the image despite it being an `inline-block` which is supposed to take the dimensions of its children. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 56.0.2924.87 Channel: n/a OS Version: OS X 10.12.4 Flash Version: Shockwave Flash 25.0 r0
,
Mar 31 2017
,
Apr 19 2017
It seems padding-left: 0% or padding-right: 0% can also fixes this issue.
,
Apr 21 2017
Here is a simpler test case that I think illustrates the same issue.
data:text/html,<img width=90% alt=x src onerror="removeAttribute('width')">
,
Apr 25 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/76e307f44292b2999535aa8c5605cfd9129e9c12 commit 76e307f44292b2999535aa8c5605cfd9129e9c12 Author: shoon.kim <shoon.kim@lge.com> Date: Tue Apr 25 09:37:39 2017 Add NeedsPreferredWidthsRecalculation() for block In the case the block has relative height and width is auto and it has an image which should keep the aspect ratio, it needs preferred width recalculation if the parent changes the height. To cover this, add NeedsPreferredWidthsRecalculation() for LayoutBlock. BUG= 707151 , 514663 , 709233 Review-Url: https://codereview.chromium.org/2828453002 Cr-Commit-Position: refs/heads/master@{#466934} [add] https://crrev.com/76e307f44292b2999535aa8c5605cfd9129e9c12/third_party/WebKit/LayoutTests/fast/block/block-width-recalc-with-relative-height.html [modify] https://crrev.com/76e307f44292b2999535aa8c5605cfd9129e9c12/third_party/WebKit/Source/core/layout/LayoutBlock.cpp [modify] https://crrev.com/76e307f44292b2999535aa8c5605cfd9129e9c12/third_party/WebKit/Source/core/layout/LayoutBlock.h
,
May 9 2017
http://codepen.io/yisi/pen/gWooxJ inline-grid is invalid.
,
Jul 21 2017
,
Jul 23
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
,
Jul 23
Now appears to work as expected and both test cases render the same in Chrome as in FF.
,
Jul 24
yes, this has been fixed for a while. All good. |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by aghassemi@google.com
, Mar 31 2017