Grid items overlapping with position sticky

user_10419225 0
Viewed 738

I am having an issue with sticky items in a grid container in firefox.

I have created a grid container with 8 items of 100px each:

  • item 1 is sticky to the left side
  • item 8 is sticky to the right side of the container

When I scroll to the right of the grid container:

  • In Chrome (80.0.3987.122) everything is okay. item 7 and 8 and next to each other (and initial scrollWidth of the container was 800px)
  • In Firefox (73.0.1 (64-bit) however, item 7 and 8 are overlapping (and initial scrollWidth of the container was 700px)

Anyone has any idea how to solve that in Firefox?

See the attached snippet.

Thanks!

setTimeout(() => {
  console.log('container width', document.querySelector('#container-grid').scrollWidth + 'px');
}, 100)
#container-grid {
  width: 500px;
  background: silver;
  height: 100px;
  overflow-x: scroll;
}

.items {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;
}

.sticky-left {
  position: sticky;
  left: 0;
}


.sticky-right {
  position: sticky;
  right: 0;
}
<div id="container-grid">
  <div class="items">
    <div class="item">item 1</div>
    <div class="item sticky-left">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item ">item 6</div>
    <div class="item ">item 7</div>
    <div class="item sticky-right">item 8</div>
  </div>
</div>

css-grid sticky firefox css html
2 Answers

Adding an extra item with a very small width seems to avoid the bug on firefox

setTimeout(() => {
  console.log('container width', document.querySelector('#container-grid').scrollWidth + 'px');
}, 100)
#container-grid {
  width: 500px;
  background: silver;
  height: 100px;
  overflow-x: scroll;
}

.items {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 0.3px;
}
.items::after {
  content:"";
}

.sticky-left {
  position: sticky;
  left: 0;
}


.sticky-right {
  position: sticky;
  right: 0;
}
<div id="container-grid">
  <div class="items">
    <div class="item">item 1</div>
    <div class="item sticky-left">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item ">item 6</div>
    <div class="item ">item 7</div>
    <div class="item sticky-right">item 8</div>
  </div>
</div>

user_86203330

I don't think there's a fix for this problem.

You're mixing cutting edge features (position: sticky and grid items), so the browsers probably just need some time to sort out the proper behavior.

Note that position: sticky doesn't yet have complete browser support.

I would try building the layout in a standard block formatting context (display: block or inline-block).

user_35972760
Related