container scrolls to top when children element height changes

Question

I came across a bit quirky behavior. At least it seems quirky to me.

You can check it out here: https://fiddle.jshell.net/mxmcd9Lw/8/show/

Mainly when a elem

Answer 1

This seems to happen most times when the grid-area is set to something dynamic and has overflow - for example if you set .l-page to grid-template-rows: repeat(4, auto) the bug is still present, but in grid-template-rows: repeat(4, 100px) it is not.

I have found a work-around that works in Chrome. Setting .l-page to grid-template-rows: auto auto auto minmax(1px, 1fr); somehow keeps the scroll position as you would expect. I don't know why though.

Here's the modified fiddle: https://fiddle.jshell.net/mxmcd9Lw/59/

Also, worth noting in Firefox Developer Edition v60 the bug appears to be fixed - your example works fine there. So I assume this is a known bug that will be resolved by browsers shortly.