Web: Common: Layout/PageLayout: fixed component rendering bugs when changing orientation(ios-safari)
This commit is contained in:
parent
fec2e6d685
commit
65dc3d5f43
@ -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
|
||||
)}
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user