796945 - Vertical Scrollbar Bug with overflow auto

Status: VERIFIED DUPLICATE of bug 210657

(Core :: Layout, defect)

Description

[oliver.stiefbold]

Attachment: firefoxScrollbarBug.html

User Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E)

Steps to reproduce:

Example:
There are two content areas below. Both are nested in a scroll area (DIV with overflow:auto). The scroll areas are nested in a table with two rows each taking 50% of the table space. The content areas should use the available space (100% height and width) to draw their metrics until their content is larger than the available space defined in the scroll areas. From this point on scrollbars should appear.
Content are 1 has less content. Content Area 2 has content which is larger than the surrounding scroll area.

All browsers are doing that properly except FireFox. It expands Content Area 2and no scrollbars do appear.



Actual results:

Scrollbar does not appear in table cell, but in window


Expected results:

see other browsers: scrollbar in table cell

Comment 1

[[:Aleksej]]

I confirm that it works differently with
Nightly 20120928030544 Mozilla/5.0 (X11; Linux x86_64; rv:18.0) Gecko/18.0 Firefox/18.0
than with Konqueror 4.8.3 (KDE 4.8.4).

Comment 2

[[:Aleksej]]

(please undupe if I am wrong)

Comment 5

[Boris Zbarsky [:bzbarsky]]

> The content areas should use the available space (100% height and width) 

Not per spec, since the table cells have auto computed height.  Per spec, our behavior looks correct...

Comment 6

[oliver.stiefbold]

Hi Boris,
I understand your point with the spec. I have similiar discussion with other browser vendors. The problem is, that besides spec we have sth. called good practice or common sense in the browser behaviors. 
Your solution how to handle this is good, especially if I think at table devices, but different.  We try to support all kinds of browsers with our web applications out of the box. And I am pretty sure many web developers try to do this, especially if you think of web shops and similiar scenarios. 
It would maybe ease our life if we would not only look whats written in the spec, but also what seems to be the common understanding of the spec. What do you think?

PS: Sorry for the multi post. I did not understand, that the bug is automatically created. I always searched for some "submit" or "confirm" button.

Comment 7

[oliver.stiefbold]

changed the status to verified to make it visible. Hope this is correct.

Comment 8

[[:Aleksej]]

> changed the status to verified to make it visible. Hope this is correct.

That means you agree that it is a duplicate.

Comment 9

[Boris Zbarsky [:bzbarsky]]

> It would maybe ease our life if we would not only look whats written in the spec, but
> also what seems to be the common understanding of the spec. What do you think?

I think that if the spec doesn't match reality, the spec should be changed as needed, then we should implement it.

But I also think that blindly flailing and making backwards-incompatible changes without a clear goal is not a good idea.

What would be most helpful here is a post to [e-mail] explaining the desired behavior, complete with a description of how it should act in all the various edge cases, so the spec can be fixed to reflect it.

Comment 10

[oliver.stiefbold]

Hi, I just saw that there is a difference between the duplicate 210657 an this one:
The duplicate has no height set at the cell - so I understand the argument referring to the spec. But I did. So you could please help me where i can find in the spec: 
"when a table cell height is set to specific value (in this case explicitly to 50%) that the content does not need to apply to that and fall back to “auto” for percentage values" ?



<div style="width:100%; height:400px;">
  <div id="scrollArea2" style="width:100%; height:50%; overflow:auto;">
    <div id="contentArea2" style="width:100%; height:100%; border: 1px solid red;">
      ...
    </div>
  </div>
</div>

works properly while

<table style="width:100%; height:400px;" >
  <tbody>
    <tr>
      <td style="width:100%; height:50%;">
...
      </td>
    </tr>
    <tr>
      <td style="width:100%; height:50%;">
        <div id="scrollArea2" style="width:100%; height:100%; overflow:auto;">
          <div id="contentArea2" style="width:100%; height:100%; border: 1px solid red;”>
...
          </div>
       </div>
     </td>
    </tr>
   </tbody>
</table>

does not work.
I can also set the heights to the TR or TBODY with no significant change.

Comment 11

[oliver.stiefbold]

I think it is no duplicate?

Comment 12

[Boris Zbarsky [:bzbarsky]]

>    <tr>
>      <td style="width:100%; height:50%;">

The containing block (the tr) has auto height, so per spec the cell also ends up with auto height.  See the definition of the "height" property in the spec.