Chrome scroll bug using CSS max-height transition within fixed container

Question

I have got a fixed navigation sidebar and want to use transitions for slide-up/slide-down animations on the sublevels. For some unknown reason Chrome is scrolling the page while animating. Because this happens only in Chrome, it might be a bug. Does someone know what goes wrong?

html,body {
    margin: 0;
    padding: 0;
    color: white;
}

#content {
    position: relative;
    height: 4000px;
    overflow: auto;
    background: grey;
}

#fixed {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: 200px;
    background: red;
    overflow-x: hidden
    overflow-y: auto;
}

#test {
    max-height: 0;
    background: blue;
    transition: max-height 0.5s, padding-bottom 0.5s;
    overflow: hidden;
}
#test:target {
    max-height: 50vh;
}

#testContent {
    height: 200px;
    background: green;
}

<div id="content">
    <div id="fixed">
        <a href="#test">Open Test</a><br/>
        <a href="#">Close Test</a><br/>
        <div id="test">
            <div id="testContent"></div>
        </div>
    </div>
</div>

Barman

Answer 1

To the poor souls who have suffered without an answer to this, as have I, for the past 5 years... my gift to you:

overflow-anchor: none

Adding it to a parent/wrapper container seems to have done the trick for me. More details on the property here: https://css-tricks.com/almanac/properties/o/overflow-anchor/

Lemuelah

A thousand applauses – Effortful

You just saved my job! – Loyalty