1149931 - Unnecessary scroll bar under certain circumstances

Status: UNCONFIRMED

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

Description

[Inkbug]

Attachment: test.html

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

Steps to reproduce:

1. Open the attached test case (test.html)


Actual results:

A vertical scroll bar and a disabled horizontal scroll bar showed up around the image.


Expected results:

The image should have resized itself to avoid any scroll bars, and show up like in Chrome.

Comment 1

[Inkbug]

Attachment: Screenshot in Firefox 36

Comment 2

[Inkbug]

Attachment: Screenshot in Chrome 41

Comment 3

[Boris Zbarsky [:bzbarsky]]

So the image is 918px wide and 910px tall.

The outermost div has a width of 460px, the inner div has 0px top padding and 10px left/right/bottom padding.  It also has a max-height of 425px.  The image has a max-width of 100%.

The content area of the inner div is 440px wide (460 - 10 - 10).  The image thus ends up 440px wide.  440/918 * 910 == 436.165577...  So the image ends up a bit over 436px high.  436 is larger than 425, so it's taller than the inner div, and hence overflows.

OK, so now you have to add a vertical scrollbar, right?  That's 15px wide, so the content area is now 425px wide.  The image ends up 425px wide, its height is 425/918*910 == 421.296... px, which does NOT overflow vertically.  So now you have to remove the vertical scrollbar, etc.

The spec does not describe how to break the infinite oscillation here.  We break it in favor of having a scrollbar even though the content is not actually tall enough to overflow in that case (because in most oscillating overflow cases this produces more desirable behavior: it's better to have a not-quite-necessary scrollbar than to have content cut off and unreadable).  Chrome seems to be breaking it in favor of not having a scrollbar but still making the image too narrow and short, as if the scrollbar were there.  Specifically, in Chrome the image ends up 425px wide, even though its parent element's content area is 440px wide.

Chrome's behavior is actually quite weird here, because if the scrollbar were not there you could never get into a situation where the image is narrower than its parent's content area like that.  But as I said, the spec allows whatever behavior you want here, because it doesn't define how to render this at all.

Comment 4

[Inkbug]

So is there any way to change this behavior? I have a real life case where this happens, and aesthetically Chrome seems to be a much better solution.

I would think that most people who add overflow:auto would also prefer no scroll bar if possible (otherwise they would use overflow:scroll), but maybe that is just my personal bias.

Comment 5

[Boris Zbarsky [:bzbarsky]]

> So is there any way to change this behavior?

Sure.  "max-width: calc(100% - 15px)" if you want to leave space for a scrollbar.  That will break with wider scrollbars, of course...

If you meant change the browser's behavior, that's not so simple to do without breaking other cases as I described.  Note that the "if possible" is key: the option of resolving the oscillation without a scrollbar means you can end up with content cut off vertically and not reachable at all.