title: ReactJS web app: Selective Mobile Scrolling Bug
body: <p>I am working an ReactJS web app. We primarily style it with styled-components, and sometimes uses index.css for global styles (body, html, etc)</p>
  
  <p>The app has an app header, a page header and a container of additional components.</p>
  
  <p>I am experiencing a weird bug where the certain mobile devices cannot scroll down. Specifically the Sony Xperia XCompact and the Samsung S8.</p>
  
  <p>The .js files :
  (The components are spread in multiple files, I tried my best to grab everything that might be related.)</p>
  
  <pre><code>// 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 = () =&gt; ( 
  &lt;AppHeader/&gt;
  &lt;PageHeaderContainer&gt;
      &lt;Greeting/&gt;
      &lt;PageTitle/&gt;
  &lt;/PageHeaderContainer&gt;
  &lt;IntroductionSlider&gt;
      &lt;Container&gt;
          {/*more components*/}
      &lt;/Container&gt;
  &lt;/IntroductionSlider&gt;
  )
  </code></pre>
  
  <p>The index.css:</p>
  
  <pre><code>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%;
  }
  </code></pre>
  
  <p>This code works <strong>fine</strong> in the latest version of Chrome, in Opera, in several mobile browsers ( Pixel 2, S10, Pixel 3, IPhone 7). </p>
  
  <p>But scrolling somehow would be disabled in Sony Xperia XCompact and Samsung S8+.</p>
  
  <p>I currently have a temporary fix, where if I change height of <code>body</code> to auto instead of 100%, the scrolling would be enabled again (tested on the Sony phone). But I am having trouble to understand why is this happening.</p>
  
  <p>A lot of this code is inherited; I'm fairly new to the job and still trying to understand what's going on / how things work. Any help is greatly appreciated!</p>