1644370 - CSS grid with combination of CSS position sticky at the bottom and overflow auto hides last element

Status: RESOLVED DUPLICATE of bug 1377072

(Core :: Layout: Grid, defect, P3)

Description

[u664632]

Attachment: css_grid_position_sticky_bottom.png

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36

Steps to reproduce:

CSS:

.container {
height: 300px;
display: grid;
grid-template-columns: 2fr 1fr;
}

.side {
background-color: grey;
}

.table {
display: grid;
overflow: auto;
}

.row {
display: grid;
}

.header {
background-color: lightgrey;
position: sticky;
top: 0;
}

.footer {
background-color: lightgrey;
position: sticky;
bottom: 0;
}

HTML:

<div class="container">
<div class="table">
<div class="header">Characters</div>
<div class="row">A</div>
<div class="row">B</div>
<div class="row">C</div>
<div class="row">D</div>
<div class="row">E</div>
<div class="row">F</div>
<div class="row">G</div>
<div class="row">H</div>
<div class="row">I</div>
<div class="row">J</div>
<div class="row">K</div>
<div class="row">L</div>
<div class="row">M</div>
<div class="row">N</div>
<div class="row">O</div>
<div class="row">P</div>
<div class="row">Q</div>
<div class="row">R</div>
<div class="row">S</div>
<div class="row">T</div>
<div class="row">U</div>
<div class="row">V</div>
<div class="row">W</div>
<div class="row">X</div>
<div class="row">Y</div>
<div class="row">Z</div>
<div class="footer">Total 26</div>
</div>
<div class="side">Side</div>
</div>

https://jsfiddle.net/uL4og89s/7/

Actual results:

As you might see, when you scroll down, the last row element with character "Z" is not displayed. In fact it is hidden resp. overlapped by the footer element.

Expected results:

When scrolling down, I see the last row element with character "Z". The chromium browser (v. 83) does it right in my eyes.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Alice0775 White]

I can reproduce the issue on Nightly79.0a1 Windows10.

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:svoisen, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 4

[Sean Voisen (:svoisen)]

Daniel: Do you happen to know what the correct behavior should be? Seems like we should be leaving overscroll room to accommodate the sticky footer like Blink/Webkit, but not sure.

Comment 5

[Daniel Holbert [:dholbert]]

Yeah, I think our behavior here is wrong. This looks like basically the same issue as bug 1585254 (and it affects both flex and grid, and both "end" scroll-sides).

--> marking as a duplicate

Comment 6

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Adjust the duplicate to bug 1377072 that actually fixed this bug.