V12.0 seems to ignore padding-bottom and padding-right of scrollable DOM (overflow:auto)




5 years ago
5 years ago


(Reporter: thepiglovesyou, Unassigned)


12 Branch
Windows 7

Firefox Tracking Flags

(Not tracked)



(1 attachment)



5 years ago
Created attachment 622655 [details]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.168 Safari/535.19

Steps to reproduce:

<style type="text/css">
  #box {
    width: 200px;
    height: 200px; 
    border: 1px gray solid;
    padding: 20px;
    overflow: auto;
    background: pink;
  #inner {
    background: #ccc;
    width: 600px;
    height: 600px;
<div id="box">
  <div id="inner">
    Scroll to bottom right, ...

Actual results:

Padding-bottom and padding-right don't emerge when scrolling.

Expected results:

Range of padding-bottom and padding-right should be added to scrollHeight of the DOM.


5 years ago
Attachment #622655 - Attachment mime type: text/plain → text/html

Comment 1

5 years ago
I think this was changed by Bug 665597.
And Firefox handles padding the same as IE10 now.


5 years ago
Component: Untriaged → Layout
Product: Firefox → Core
QA Contact: untriaged → layout
Yes, as I understand the new behavior is the one the spec requires.  Mats, can you confirm?

Comment 3

5 years ago
And I experienced this "bug" today and someone beat me to report it for a few hours :(

(In reply to Alice0775 White from comment #1)
> And Firefox handles padding the same as IE10 now.

IE 9 ignores the padding too. the current public releases of Opera, Chrome, Safari (Windows) do not ignore the padding, Only IE 9 and now Firefox are ignoring it. If it is the correct behavior dictated by the spec, sounds really weird to me

My test case:

.box {
  padding: 15px;
  margin-bottom: 10px;
  overflow: auto;
  background-color: red;
.box-content {
  background-color: green;
  width: 200px;
  height: 200px;
<div class="box">
  <div class="box-content"></div>
<div class="box" style="max-height: 100px;">
  <div class="box-content"></div>
> sounds really weird to me

Please do take this up with the CSS working group?  Found the bug where Mats confirmed that this behavior is what the spec requires once already...
Last Resolved: 5 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 748518
And note that in general IE9 has a much more spec-compliant CSS 2.1 implementation than Chrome and Safari (pass rates of about 97% and 85% for the test suite respectively, last I looked).  It helps to be implementing after the spec is closer to being finalized... ;)
That is, IE's pass rate was about 97%, while WebKit's (and hence Chrome's and Safari's) was about 85%.

Comment 7

5 years ago
ohh! time to live with it then. Just for the record, nested DIVs with the padding on the inner DIV gives the old behavior

Comment 8

5 years ago
Thank you for dealing with this ticket.

I saw the comment:https://bugzilla.mozilla.org/show_bug.cgi?id=748518#c6.
Can I ask that this behavior (ignoring padding-bottom) is kept forever in firefox as long as CSS2.1 keeps the spec..?
I'm not sure what you're asking...

Comment 10

5 years ago
Does Firefox v13.0 ignores padding-bottom as well?
Firefox 12 and all later versions follow the spec here.
(In reply to thepiglovesyou from comment #10)
> Does Firefox v13.0 ignores padding-bottom as well?

We don't ignore padding-bottom.  We just do the layout the same way whether there's
a scrolling mechanism or not -- per the CSS box model.

So for your attached example, from top to bottom inside the #box border, you have
20px top padding, 200px height, 20px bottom padding, then 600px - 220px overflow
from #inner.  The scroll view allows you to view that overflow, there's nothing
below it.

Comment 13

5 years ago
I appreciate explaining in detail.
I understand that scrollable-range is just overflow-range and makes no reference to padding-bottom, which v11.0 counted.

Still, this change of behavior provides a lot of work to me..
You need to log in before you can comment on or make changes to this bug.