829958 - Intrinsic width calculation for block with overflow not visible and a percentage-height image child is incorrect

Status: RESOLVED FIXED

(Core :: Layout: Block and Inline, defect)

Description

[Cristian Dobre]

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:18.0) Gecko/20100101 Firefox/18.0
Build ID: 20130104151925

Steps to reproduce:

container > div > img




Actual results:

Firefox doesn't update widths of inline-block elements( div ) when their children( img ) are resized through CSS like height: 80%. This bug appears when overflow of container is hidden or scroll.

http://jsfiddle.net/e4nAN/


Expected results:

widths should be updated, none of the other browsers have this issue

Comment 1

[(mostly gone) XtC4UaLL [:xtc4uall]]

I can repro the Issue back to at least

Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.0.19) Gecko/2010031422 Firefox/3.0.19 ID:2010031422

=> probably already filed.

Comment 2

[Boris Zbarsky [:bzbarsky]]

Hmm.  So the issue here, presumably, is that GetPercentHeight in nsLayoutUtils.cpp ends up returning auto because of the scrollframe/scrolledframe stuff or something...

Comment 4

[Bem Jones-Bey]

Attachment: Standalone version of JSFiddle test case

Comment 5

[Bem Jones-Bey]

Attachment: Fix for the bug

Change the intrinsic height calculation to use the height from the scroll frame not from it's scrollable div child when determining percentage heights so that it works the same way as reflow does in this situation.

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Pushed attachment 772728 [details] [diff] [review] to try:
https://tbpl.mozilla.org/?tree=Try&rev=4ba0f67f4991

Comment 7

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 772728 [details] [diff] [review]
Fix for the bug

Very nice!  Sorry for the review lag...

r=me

Comment 8

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/4a12e7c6f742

Comment 9

[Ed Morley [:emorley]]

https://hg.mozilla.org/mozilla-central/rev/4a12e7c6f742

Comment 11

[anne.jouan.info]

It seems the same bug appears again (FF 50.1), overflow-y:hiddenn overflow-x: scroll (or equivalent propertie) on parent container makes the issue.

HTML
<div class="productSingle-imagesContainer">
     <a href="{{ image.path }}" class="productSingle-linkImage">
	<img src="{{ image.path }}" alt="" class="productSingle-image">
     </a>
</div>

CSS
.productSingle-imagesContainer {
    height: 300px;
    overflow-y: hidden;
    display: flex;
    width: 100%;
    justify-content: center;
}
.productSingle-linkImage {
    background: green;
    height: 100%;
}
.productSingle-image {
    width: auto;
    height: 100%;
}

Comment 12

[Boris Zbarsky [:bzbarsky]]

Comment 11 is likely due to the nonzero min-width on the <a> coming from it being a flex-item.  Setting min-width:0 on it explicitly probably produces the behavior you want.

If not, it would be useful to link to an actual testcase, because the image dimensions matter here.

Comment 13

[joachim.rolland.marmier]

Not sure if it's totally related but I encountered a bug that seems quite similar :
An image wrapper div takes the source width of the inner img when its height is expressed as a percentage.

Here is a jsfiddle that reproduces the issue : 
http://jsfiddle.net/nm9u354f/

Comment 14

[jeppereinhold]

I am experiencing the exact same issue as Comment 13, and can confirm that this is a problem in Firefox 56.0.1, macOS Sierra.

Comment 15

[jeppereinhold]

(In reply to jeppereinhold from comment #14)
> I am experiencing the exact same issue as Comment 13, and can confirm that
> this is a problem in Firefox 56.0.1, macOS Sierra.

And also version 57.0

Comment 16

[andersiversen]

(In reply to jeppereinhold from comment #15)
> And also version 57.0

And 57.0.1 (64-bit) on Ubuntu 16.04

Comment 17

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

If you want the above discussion to have a chance of leading to a fix, please file a new bug rather than having it in a bug that was fixed years ago.

Comment 18

[jeppereinhold]

Filed new bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1426095