我正在使用 Material UI 中的 Switch 组件来展开/折叠列表中的元素。在 iOS 上的 Safari 中查看页面时，我遇到了重影问题，即在展开元素后，下一个元素中的开关通常仍然可见。这在使用过渡时尤其糟糕。但是当滚动时，幽灵开关消失了，一切看起来都很好。
这是 Material UI 问题还是其他问题？有什么办法可以解决吗？
https://codesandbox.io/s/material-ui-switch-ghost-issue-2ie26?file=/src/App.js
【问题讨论】：
标签： reactjs material-ui
Switch 波纹动画和Item 动画正在寻找资源来制作动画，而 Safari 似乎无法优化动画过程。
因此，您可以在Item css 中添加will-change: transform; 以通知浏览器将有一个转换事件并准备好：
const Item = styled.div`
max-height: ${({ $isSelected }) => ($isSelected ? "20rem" : "2.5rem")};
will-change: transform;
transition: max-height 0.1s ease-out;
overflow: hidden;
background: gray;
margin-bottom: 0.2rem;
`;
will-change的定义：
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
可行的代码框：
https://codesandbox.io/s/material-ui-switch-ghost-issue-forked-fgqqx
【讨论】：