材质 UI 重影问题

Question

我正在使用 Material UI 中的 Switch 组件来展开/折叠列表中的元素。当在 iOS 上的 Safari 中查看页面时，我遇到了一个重影问题，即扩展元素后下一个元素中的开关通常仍然可见。这在使用过渡时尤其糟糕。但是当滚动时，幽灵开关消失了，一切看起来都很好。

这是 Material UI 问题还是其他问题？我可以做些什么来解决问题？

https://codesandbox.io/s/material-ui-switch-ghost-issue-2ie26?file=/src/App.js

Answer 1

Switch 涟漪动画和 Item 动画正在争夺资源来制作动画，而 Safari 似乎无法优化动画过程。

因此，您可以在 will-change: transform; css 中添加 Item 以通知浏览器将发生转换事件并准备就绪：

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