1

I created a reproduction here

The bug happens when the first element in a CSS grid is above the fold and it's moved to a row below its current one (using grid-area or grid-template-rows). In that case, the page will scroll down as if to accommodate the grid item.

However, this doesn't happen with any other grid item. Their position can be modified without this weird behavior.

You can create this behavior by modifying the CSS directly in the dev tools, no JS required.

Is this intended behavior? Is it a CSS grid bug? I can't imagine this being intended as it makes no sense, especially given that there are other items in the first row.

Any resource explaining this behavior would be appreciated.

document.querySelector(".button-1").addEventListener("click", () => {
  document.querySelector(".item-1").style.gridArea = "2/2/2/1";
});

document.querySelector(".button-2").addEventListener("click", () => {
  document.querySelector(".item-2").style.gridArea = "2/2/3/3";
});
body {
  font-family: sans-serif;
}

.big-box {
  width: 100%;
  height: 500px;
}

.grid {
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  grid-template-rows: repeat(3, minmax(100px, 1fr));
  gap: 12px;
  display: grid;
  width: 100%;
  background: #f1f1f1;
}

.item-1 {
  background-color: #2eb5daff;
}

.item-2 {
  background-color: #387e48;
}

.item-3 {
  background-color: #c32eda;
}

.item-4 {
  background-color: #dac32e;
}
<html>

<body>
  <h2>
    Scroll down until the grid items are half hidden, then press the buttons to see the bug
  </h2>
  <h3>Refresh between button pressed</h3>
  <div class="big-box"></div>

  <div class="grid">
    <div class="item-1">
      shtshtsh
    </div>
    <div class="item-2">
      shtshths
    </div>
    <div class="item-3"></div>
    <div class="item-4"></div>
  </div>

  <button class="button-1">
      Move first grid item and see the scroll bar move
    </button>
  <button class="button-2">
      Move second grid item, and it behaves correctly
    </button>

  <div class="big-box"></div>


</body>

</html>
disinfor
  • 10,865
  • 2
  • 33
  • 44
Obed Parlapiano
  • 3,226
  • 3
  • 21
  • 39
  • It's clearly a problem that impacts only the first grid item. Even if you shuffle around the items in your code, it's always the first one only ([jsFiddle demo](https://jsfiddle.net/ghzum602/)). – Michael Benjamin Jul 12 '23 at 23:10
  • The solution is to add `overflow-anchor: none` to the grid container. It's explained in the duplicate. – Michael Benjamin Jul 12 '23 at 23:10
  • 1
    Adding `overflow-anchor: none` fixed it. I didn't know of that property! Thank you @MichaelBenjamin – Obed Parlapiano Jul 13 '23 at 14:28

0 Answers0