title: How to keep an app fullscreen on iOS Safari after screen orientation changes
body: <p>I build a SPA that should always take 100% of screen height with the target browser group - iOS(mobile) Safari. <code>height:100vh</code> doesn't work properly on iOS Safari -</p>
  <p><a href="https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser">CSS3 100vh not constant in mobile browser</a></p>
  <p><a href="https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/" rel="nofollow noreferrer">https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/</a></p>
  <p>A suggested solution on some resources to use <code>-webkit-fill-available</code> didn't help.</p>
  <p>Therefore, I decided to control the height of the app container with JS:</p>
  <pre><code>const [height, setHeight] = useState(window.innerHeight);
  
    const handleWindowSizeChange = () =&gt; {
      setHeight(window.innerHeight);
    };
    useEffect(() =&gt; {
      window.addEventListener(&quot;resize&quot;, handleWindowSizeChange);
      return () =&gt; window.removeEventListener(&quot;resize&quot;, handleWindowSizeChange);
    }, []);
    return (
      &lt;div className=&quot;App&quot; style={{ height: height }}&gt;
        &lt;header className=&quot;top&quot;&gt;&lt;/header&gt;
        &lt;div className=&quot;main&quot;&gt;&lt;/div&gt;
        &lt;footer className=&quot;bottom&quot;&gt;&lt;button&gt;Click&lt;/button&gt;&lt;/footer&gt;
      &lt;/div&gt;
  </code></pre>
  <p>My solution works until we rotate the screen from portrait orientation to landscape, and back to portrait. After these rotations, we have a gap at the bottom of the screen view, right below the app footer. The same behaviour can be noticed if we open
  a demo - <a href="https://react-div-100vh.vercel.app/" rel="nofollow noreferrer">https://react-div-100vh.vercel.app/</a> for a package which is supposed to solve the issue, and make the same screen rotations.</p>
  <p>Browser: Safari 14.6 iOS/iPhone 7</p>
  <p><a href="https://github.com/dmitriifrlv/100vh-issue" rel="nofollow noreferrer">Repository</a></p>
  <p><a href="https://100vh-issue.netlify.app/" rel="nofollow noreferrer">Live app</a></p>
  <p><a href="https://codesandbox.io/s/100vh-issue-u36q0?file=/src/App.js" rel="nofollow noreferrer">CodeSandbox</a></p>