css - 在固定容器内使用 CSS 最大高度过渡的 Chrome 滚动错误

Question

我有一个固定的导航侧边栏，并希望在子级别上为上滑/下滑动画使用过渡。出于某种未知原因，Chrome 在制作动画时会滚动页面。
因为这仅在 Chrome 中发生，所以它可能是一个错误。有人知道出了什么问题吗？

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>

Answer 1

致那些在过去 5 年里一直受苦却没有答案的可怜灵魂，就像我一样……我给你们的礼物:

overflow-anchor: none

将它添加到父/包装容器似乎对我来说已经完成了。有关该属性(property)的更多详细信息，请访问:https://css-tricks.com/almanac/properties/o/overflow-anchor/