Search code examples
androidcssviewportaddress-bargoogle-chrome-android

Infamous height:100% issue on chrome for android - address bar

I have created an angular app where the sidebar is height: 100%. However when viewing the webapp in Chrome for Android, when scrolling the document:

  1. The chrome address bar slides up gently
  2. The 100% real size remains the same until you TouchEnd

height 100 remains until scrolling is finished

The darkgrey sidebar is height: calc(100% - 55px) so the top bar should normally always remain visible, and always fill the remaining space between the top bar and the very bottom.

I've already tried several things to get this fixed. The footer has bottom: 0 and this one is in fact always rendered correctly. So this made me try to use top: 55px; bottom: 0 instead of height: calc(100% - 55px). But from the moment you're setting both top and bottom, the result is the same as setting the height.

Does anybody know a way to make the viewport adjust its height while the address bar is appearing/disappearing?

Solution

  • I was able to solve this issue by

    Creating a css variable (variables.scss)

    :root {
  --viewport-height: 100%;
}

    Instead of using 100% use var(--viewport-height)

    height: calc(100% - 55px);

    becomes

    height: calc(var(--viewport-height) - 55px);

    Then binding to the visualViewport.resize event (MUST use addEventListener here)

    if (!serverSide) {
  visualViewport.addEventListener('resize', () => {
    document.documentElement.style.setProperty('--viewport-height', `${visualViewport.height}px`);
  });
}

    Make sure there is no transition set for the height property.

    CSS variables are supported by all major browsers.