Web: Common: Layout/PageLayout: fixed component rendering bugs when changing orientation(ios-safari)

web/ASC.Web.Common/src/components/Layout/index.js

@@ -2,12 +2,22 @@ import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import MobileLayout from "./MobileLayout";
 import { utils } from "asc-web-components";
+import {
+  isIOS,
+  isMobileSafari,
+  isFirefox,
+  isChrome,
+} from "react-device-detect";
 
 const { size } = utils.device;
 
 const StyledContainer = styled.div`
   width: 100%;
-  height: 100vh;
+  height: ${isIOS && !isFirefox
+    ? !isChrome
+      ? "calc(var(--vh, 1vh) * 100 + 57px)"
+      : "var(--vh, 100vh)"
+    : "100vh "};
 `;
 
 const Layout = (props) => {
@@ -25,10 +35,36 @@ const Layout = (props) => {
     return () => mediaQuery.removeListener(setWindowWidth);
   }, []);
 
+  useEffect(() => {
+    window.addEventListener("resize", resizeHandler);
+
+    resizeHandler();
+
+    return () => {
+      window.removeEventListener("resize", resizeHandler);
+    };
+  }, []);
+
+  const resizeHandler = () => {
+    let vh;
+    if (isIOS) {
+      if (isMobileSafari) {
+        vh = (window.innerHeight - 57) * 0.01;
+      }
+      if (isChrome) {
+        vh = window.innerHeight;
+      }
+    } else {
+      vh = (window.innerHeight - 57) * 0.01;
+    }
+
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+  };
+
   return (
     <StyledContainer className="Layout">
       {windowWidth && windowWidth.matches ? (
-        <MobileLayout {...props} />
+        <MobileLayout {...props} className="mobile-layout" />
       ) : (
         children
       )}

web/ASC.Web.Common/src/components/PageLayout/index.js

@@ -106,7 +106,7 @@ class PageLayoutComponent extends React.Component {
   }
 
   orientationChangeHandler = () => {
-    this.updateMainHeight();
+    //this.updateMainHeight();
 
     const isValueExist = !!localStorage.getItem(ARTICLE_PINNED_KEY);
     const isEnoughWidth = screen.availWidth > size.smallTablet;