MUI的zoom等过渡动画在Chrome iOS端完全失效该如何解决

根因说明 #

iOS端所有第三方浏览器均强制使用苹果WebKit内核渲染，与桌面端Chrome的Blink内核差异较大，MUI v4内置过渡组件的动画配置未覆盖WebKit内核的特殊兼容要求，导致动画在iOS Chrome下无法触发。

可用修复方案 #

• 方案1：强制开启GPU加速 #

给过渡组件添加transform: translateZ(0)样式触发WebKit的GPU渲染，修复动画不生效问题，单组件使用示例：

import Zoom from '@material-ui/core/Zoom';

<Zoom in={visible} style={{ transform: 'translateZ(0)' }}>
  <div>需要过渡的元素</div>
</Zoom>

如需全局生效，可在主题配置中统一覆盖组件样式：

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    MuiZoom: {
      enter: { transform: 'translateZ(0) scale(1)' },
      exit: { transform: 'translateZ(0) scale(0)' }
    },
    MuiGrow: {
      enter: { transform: 'translateZ(0) scale(1)' },
      exit: { transform: 'translateZ(0) scale(0)' }
    },
    MuiSlide: {
      root: { transform: 'translateZ(0)' }
    }
  }
});

• 方案2：添加-webkit-前缀的过渡属性 #

手动给过渡组件补充WebKit前缀的过渡属性，适配内核要求：

<Slide 
  in={visible} 
  direction="right"
  style={{ 
    WebkitTransition: '-webkit-transform 225ms cubic-bezier(0.4, 0, 0.2, 1)',
    transition: 'transform 225ms cubic-bezier(0.4, 0, 0.2, 1)'
  }}
>
  <div>需要过渡的元素</div>
</Slide>

• 方案3：自定义CSS动画实现效果 #

如果以上方案均不生效，可以自行编写带WebKit前缀的CSS关键帧动画，给元素绑定类名实现相同过渡效果，避开MUI内置过渡的兼容问题。

内容的提问来源于stack exchange，提问作者Richardson