Last Comment Bug 829958 - Intrinsic width calculation for block with overflow not visible and a percentage-height image child is incorrect
: Intrinsic width calculation for block with overflow not visible and a percent...
Status: RESOLVED FIXED
[mentor=bz][lang=c++]
:
Product: Core
Classification: Components
Component: Layout: Block and Inline (show other bugs)
: 18 Branch
: x86 Windows 7
-- normal (vote)
: mozilla25
Assigned To: Bem Jones-Bey
:
: Jet Villegas (:jet)
Mentors:
: 653739 887885 (view as bug list)
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2013-01-12 08:21 PST by Cristian Dobre
Modified: 2017-01-09 15:26 PST (History)
9 users (show)
ryanvm: in‑testsuite+
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
Standalone version of JSFiddle test case (1.09 KB, text/html)
2013-07-08 17:29 PDT, Bem Jones-Bey
no flags Details
Fix for the bug (15.07 KB, patch)
2013-07-09 10:43 PDT, Bem Jones-Bey
bzbarsky: review+
Details | Diff | Splinter Review

Description User image Cristian Dobre 2013-01-12 08:21:07 PST
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 User image (mostly gone) XtC4UaLL [:xtc4uall] 2013-01-12 11:27:39 PST
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 User image Boris Zbarsky [:bz] (still a bit busy) 2013-01-15 14:41:00 PST
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 3 User image Boris Zbarsky [:bz] (still a bit busy) 2013-06-27 16:11:08 PDT
*** Bug 887885 has been marked as a duplicate of this bug. ***
Comment 4 User image Bem Jones-Bey 2013-07-08 17:29:21 PDT
Created attachment 772409 [details]
Standalone version of JSFiddle test case
Comment 5 User image Bem Jones-Bey 2013-07-09 10:43:16 PDT
Created attachment 772728 [details] [diff] [review]
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 User image David Baron :dbaron: ⌚️UTC-8 2013-07-09 11:30:42 PDT
Pushed attachment 772728 [details] [diff] [review] to try:
https://tbpl.mozilla.org/?tree=Try&rev=4ba0f67f4991
Comment 7 User image Boris Zbarsky [:bz] (still a bit busy) 2013-07-12 12:15:51 PDT
Comment on attachment 772728 [details] [diff] [review]
Fix for the bug

Very nice!  Sorry for the review lag...

r=me
Comment 8 User image Ryan VanderMeulen [:RyanVM] 2013-07-12 14:24:44 PDT
https://hg.mozilla.org/integration/mozilla-inbound/rev/4a12e7c6f742
Comment 9 User image Ed Morley [:emorley] 2013-07-15 02:58:58 PDT
https://hg.mozilla.org/mozilla-central/rev/4a12e7c6f742
Comment 10 User image Boris Zbarsky [:bz] (still a bit busy) 2013-09-16 23:30:18 PDT
*** Bug 653739 has been marked as a duplicate of this bug. ***
Comment 11 User image anne.jouan.info 2017-01-09 07:05:51 PST
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 User image Boris Zbarsky [:bz] (still a bit busy) 2017-01-09 15:26:15 PST
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.

Note You need to log in before you can comment on or make changes to this bug.