2

Is it expected behaviour that whenever you hover on whatever element in the section of the grid-template-rows that has overflow and auto height moves scroll position to the bottom of the overflown container (body in this case)?

The most visible scroll breaking effect is when you are doing circles between 2 li elements and trying to scroll either up or down on snippet #1.

When I remove :hover on li the scroll doesn't break. 

.container{
  display: grid;
  grid-template-rows: 10vh auto 8vh;
  width: 400px;
  height: 300px;
  background: rgba(0,0,0.2);
}

.header{
  background: lightblue;
}

.body{
  background: white;
  overflow: auto;
}

.footer{
  background: lightgreen;
}

li{
  height: 30px;
  background: rgba(0,0,0,.5);
  opacity: 1;
}
li:nth-child(even){
  background: rgba(0,0,0,.2);
}

li:hover{
  opacity: .1;
}
<div class="container">
  <div class="header">header</div>
  <div class="body">body
  <ul>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
  </ul>
  </div>
  <div class="footer">footer</div>
</div>

On the other hand if you hardcode the middle value to be i.e 40vh instead of auto scroll works as intended.

.container{
  display: grid;
  grid-template-rows: 10vh 40vh 8vh;
  width: 400px;
  height: 300px;
  background: rgba(0,0,0.2);
}

.header{
  background: lightblue;
}

.body{
  background: white;
  overflow: auto;
}

.footer{
  background: lightgreen;
}

li{
  height: 30px;
  background: rgba(0,0,0,.5);
  opacity: 1;
}
li:nth-child(even){
  background: rgba(0,0,0,.2);
}

li:hover{
  opacity: .1;
}
<div class="container">
  <div class="header">header</div>
  <div class="body">body
  <ul>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
  </ul>
  </div>
  <div class="footer">footer</div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
nehel
  • 845
  • 3
  • 16
  • 29
  • No breaking scroll for me, on Chrome – Asons May 26 '17 at 12:59
  • Both snippets? Or just second? Cus it breaks for me on latest Chrome / Opera updates (`58.0.30291`) though it works smoothly on Firefox – nehel May 26 '17 at 13:04
  • Both works the same for me...Chrome 58.0.3029.110 (64-bit) on Windows 10 – Asons May 26 '17 at 13:06
  • Hmm, were you moving your mouse between 2 `li's` while trying to scroll? Because thats the moment when the scroll breaks – nehel May 26 '17 at 13:12
  • Okay, missed that small info....when move cursor in a circle in first sample, it does do that and no idea why – Asons May 26 '17 at 13:18
  • Can reproduce while circling and scrolling at the same time in the first example. Second is fine. 1fr: `grid-template-rows: 10vh 1fr 8vh;` is also fine but not auto… You may want to [report bug to Chrom(e|ium)](https://bugs.chromium.org/p/chromium/issues/list). According to [spec](https://www.w3.org/TR/css-grid-1/#adapting-to-available-space), auto sizes the column to fit its content so maybe it can't due to height and overflow on parent and then I don't know :) – FelipeAls May 26 '17 at 15:42
  • Seems like `fr` unit is a way to go then. Was thinking the same about `overflow` and `height` correlation which kinda makes sense, but then again, scroll doesn't break in Firefox so that could be chrome / webkit bug since the behaviour is the same in chrome is the same as in opera. – nehel May 26 '17 at 15:49

1 Answers1

2

I have noticed several odd behaviors in CSS Grid when using the auto value on grid-template-* properties (example). What has always worked for me is switching from auto to 1fr.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    Wow. This was a huge help, resolving with extreme simplicity an otherwise inscrutable problem. Who knows how long I might have spent trying to work around this bizarre, undocumented, de-scrolling when replacing "auto" with "1fr" made the problem disappear. Thanks a ton. – Steve Waldman Dec 04 '18 at 21:29