Reactjs 反应材料容器组件内部的滚动不平滑

我有一个组件渲染了几个子组件。 我在手机浏览器Chrome和Safari上运行该应用程序，也在iOS上作为PWA运行

当我在全屏材质对话框中渲染该组件时，滚动会像预期的那样平滑快速

但是，当我在容器组件中渲染相同的组件时（请参见下面的代码），滚动速度慢且不平滑。 行为与对话框API页面中描述的完全相同（滚动长内容 节），但我在容器组件API上看不到任何类似的属性（scroll=paper或body）。 有什么想法吗？我做错了什么

样式对象：

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
content: {
    flexGrow: 1,
    height: '100vh',
    overflow: 'auto',
  },
  container: {
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(4),
    justifyContent: 'center',
    alignItems: 'center'
  }
}

还有一个函数，我用奇怪的滚动问题渲染组件：

<main className={classes.content}>
  <Container maxWidth="lg" className={classes.container}>
       <MyComponent/>
  </Container>
</main>

---

WebkitOverflowScrolling:“touch”

毕竟完成了工作。

WebkitOverflowScrolling:“touch”

毕竟完成了工作