parent of img with percentage height too wide when any ancestor has horizontal scrollbar or is border-box with top/bottom padding

RESOLVED DUPLICATE of bug 930218

Status

()

Core
Layout
RESOLVED DUPLICATE of bug 930218
2 years ago
2 years ago

People

(Reporter: goldstar.kevin, Unassigned)

Tracking

39 Branch
x86
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

2 years ago
Created attachment 8638275 [details]
reproduce.html

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0
Build ID: 20150630154324

Steps to reproduce:

I started with an img with height 100% (and width auto). Then I surrounded that image with a div with percentage height, followed by another div with percentage height, and so on.

I then added added a "overflow-x: auto; overflow-y: hidden" rule to one ancestor and "box-sizing: border-box; padding: 50px 0" to another ancestor.

Reproduced using Firefox 39. Chrome 43 and IE9+ do not exhibit this problem.


Actual results:

For an unbroken chain of ancestors with percentage heights, styling an ancestor with "box-sizing: border-box; padding: 50px 0", or any other amount of top/bottom padding will cause the parent of the image to be too wide.


Expected results:

It looks like what happened is that first, the height of the image was computed without paying attention the amount of space the horizontal scrollbars and top/bottom padding that ancestors used up in the space that the image must fit in, and the width was scaled proportionally. The img's parent was expanded to accommodate these dimensions. Then, the image was shrunk to the correct height as a percentage of its parent after taking into account the vertical padding and scrollbar, while still maintaining its aspect ratio. Although the parent's height shrinks to fit the img height, the parent still respects the img's width as if the img was not shrunk by the vertical padding and horizontal scrollbar of its ancestors.

The expected result was to have the img's parent shrink to the final width of the img after the img is shrunk by height, respecting the vertical padding and horizontal scrollbars of its ancestors.

The attached file includes several CSS rules that demonstrate what I mean. If you only use the CSS declaration that overrides an ancestor's padding, then the extra width of the img parent is exactly the height of an ancestor's scrollbar.
(Reporter)

Comment 1

2 years ago
Created attachment 8638278 [details]
Expected

Expected layout
(Reporter)

Updated

2 years ago
OS: Unspecified → Windows 7
Hardware: Unspecified → x86
(Reporter)

Comment 2

2 years ago
Might be a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=829958
Component: Untriaged → Layout
Product: Firefox → Core
Not very likely, since that one is fixed.

But it's a duplicate of bug 930218...
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 930218
You need to log in before you can comment on or make changes to this bug.