javascript - ReactJS 网络应用程序 : Selective Mobile Scrolling Bug

Question

我正在开发一个 ReactJS 网络应用程序。我们主要使用 styled-components 来设置样式，有时使用 index.css 作为全局样式(body、html 等)

该应用程序有一个应用程序 header 、一个页面 header 和一个包含其他组件的容器。

我遇到了一个奇怪的错误，某些移动设备无法向下滚动。特别是索尼 Xperia XCompact 和三星 S8。

.js 文件: (组件分布在多个文件中，我尽力抓取所有可能相关的内容。)

// app.js
const AppHeader = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  height: 100px;
`;

const PageHeaderContainer = styled.div`
  display: grid;
  grid-template-rows: auto auto;
  padding-bottom: 0px;
  padding-top: 10px;
`;

const Container = styled.div`
    max-width: 414px;
    height: 100%;
`

export default = () => ( 
<AppHeader/>
<PageHeaderContainer>
    <Greeting/>
    <PageTitle/>
</PageHeaderContainer>
<IntroductionSlider>
    <Container>
        {/*more components*/}
    </Container>
</IntroductionSlider>
)

index.css:

html, body{
    overflow-x: hidden;
    border: none;
    outline: none;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    scroll-behavior: smooth !important;
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    width: 100%;
    height: 100%;
}

此代码在最新版本的 Chrome、Opera 和多个移动浏览器(Pixel 2、S10、Pixel 3、iPhone 7)中正常工作。

但是在 Sony Xperia XCompact 和 Samsung S8+ 中滚动会以某种方式被禁用。

我目前有一个临时修复方法，如果我将 body 的高度从 100% 更改为自动而不是 100%，滚动将再次启用(在 Sony 手机上测试)。但我很难理解为什么会这样。

很多代码都是继承而来的；我对这份工作还很陌生，仍在努力了解发生了什么/事情是如何运作的。非常感谢任何帮助!

Answer 1

这是移动版 Chrome 中的一个错误，不久前已更新。 试试这个或等待新的更新。

width:calc(100% - 1px);