iOS 15 Hiding navigation bar on landscape

Viewed 208

Before iOS 15, I was able to show the site fullscreen while scrolling down. This gesture hid the address and tabs bar (navigation bar) as showed on the gif bellow:

iOS12.4 hiding navigation bar

But something changed on iOS Safari and now this gesture doesn't hide it anymore:

iOS15.2 unable to hide navigation bar through scrolling

I created a simple sandbox to demo this, using Material-UI (MUI) v5 with the CSS Baseline component

The code:

export default function Demo() {
  const [landscapeAvailableHeight, setLandscapeAvailableHeight] = useState(0);

  useEffect(() => {
    setLandscapeAvailableHeight(
      Math.min(window.screen.availHeight, window.screen.availWidth)
    );
  }, []);

  return (
    <Box
      sx={{
        backgroundColor: "tomato"
      }}
    >
      <Box
        sx={{
          backgroundColor: "green",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          height: landscapeAvailableHeight + 1
        }}
      >
        landscapeAvailableHeight = {landscapeAvailableHeight}
      </Box>
    </Box>
  );
}

What am I missing here? Any suggestion/help is appreciated. Thanks!

0 Answers
Related