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

Question

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

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?

Answer 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