CODEWITHSUNDEEP
htmlcssfirefoxcss-gridsticky
dalox
dalox

Reputation: 147

Grid items overlapping with position sticky

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:

When I scroll to the right of the grid container:

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>

Upvotes: 2

Views: 1260

Answers (2)

Temani Afif
Temani Afif

Reputation: 272789

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>

Upvotes: 2

Michael Benjamin
Michael Benjamin

Reputation: 371163

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).

Upvotes: 1

Related Questions