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: The chrome address bar slides

Solution 1:

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.

• VisualViewport docs
• Linked-from-docs Demo with source code
• Commit reference