I've been working on a ReactJS web app where we mainly use styled-components for styling, but also sometimes utilize index.css for global styles (such as body and html).
The application consists of an app header, a page header, and a container with additional components.
Recently, I've encountered a strange issue where certain mobile devices, specifically the Sony Xperia XCompact and the Samsung S8, are unable to scroll down.
Here are snippets from the .js files: (The components are spread across multiple files, so I've tried to include everything that may be relevant.)
// 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>
)
These issues can't seem to be resolved by the index.css file:
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%;
}
Although this code works perfectly in Chrome, Opera, and other mobile browsers like Pixel 2, S10, Pixel 3, and iPhone 7, the scrolling function is somehow disabled on Sony Xperia XCompact and Samsung S8+.
As a temporary solution, changing the height of body to auto instead of 100% re-enables scrolling (tested on the Sony phone). However, the root cause of this problem still eludes me.
Since much of this codebase was inherited, I'm still relatively new at this job and trying to grasp how things work. Any insights or assistance would be immensely appreciated!