CSS 高度过渡 - chrome 方向错误
CSS height transition - wrong direction in chrome
我正在使用 react 和 react-collapse 在 div 上执行折叠过渡。
我的用例是切换折叠的元素位于折叠元素下方。
当我切换到折叠时，仅在 Chrome 84+ 中，转换发生在元素上方并且不会将其向下推。例如，在 Firefox 中，它确实如此 - 这是我想要的行为。
复制代码和框：https://codesandbox.io/s/angry-elion-dxi75?file=/src/App.js
在 chrome 84+ 中打开它会重现错误。
在 Safari/Firefox/Chrome 83- 中打开它会出现所需的行为。
我的假设是 chrome 在最新版本中执行此转换的方式发生了一些变化，并且它不允许切换元素从可见 DOM 中消失。
我对么？
有没有办法让我得到我想要的行为？
非常感谢，感谢您的帮助！
萨尔
解决方案是在这些元素之上的任何容器中添加：
overflow-anchor: none;
我正在使用 react 和 react-collapse 在 div 上执行折叠过渡。
我的用例是切换折叠的元素位于折叠元素下方。
当我切换到折叠时，仅在 Chrome 84+ 中，转换发生在元素上方并且不会将其向下推。例如，在 Firefox 中，它确实如此 - 这是我想要的行为。
复制代码和框：https://codesandbox.io/s/angry-elion-dxi75?file=/src/App.js 在 chrome 84+ 中打开它会重现错误。 在 Safari/Firefox/Chrome 83- 中打开它会出现所需的行为。
我的假设是 chrome 在最新版本中执行此转换的方式发生了一些变化，并且它不允许切换元素从可见 DOM 中消失。 我对么？ 有没有办法让我得到我想要的行为？
非常感谢，感谢您的帮助！
萨尔
解决方案是在这些元素之上的任何容器中添加：
overflow-anchor: none;