2

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?

Pieterjan
  • 2,738
  • 4
  • 28
  • 55
  • Have you tried using `100vh` instead of `100%` for the height? – John Jun 11 '21 at 12:32
  • Yes I have, but then the sidebar is hidden behind the android back/home/active apps button bar. So the bottom 50px is hidden from view and inaccessible. – Pieterjan Jun 11 '21 at 13:22
  • I also tried using `min-height: -webkit-fill-available;` but this makes the user-experience even more horrible... – Pieterjan Jun 11 '21 at 15:35
  • `vh` operates the same regardless of whether the address bar is shown or not: https://developers.google.com/web/updates/2016/12/url-bar-resizing. So it's not `vh` for sure... – Pieterjan Jun 12 '21 at 05:10

1 Answers1

7

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.

Pieterjan
  • 2,738
  • 4
  • 28
  • 55
  • Please explain `55px` – Kalnode Sep 07 '21 at 17:47
  • Yes, that's the height of my header. The sidebar fills the space between the header and the bottom of the window – Pieterjan Sep 07 '21 at 17:55
  • I have to add however that this does work with the address bar, but doesn't work for the tabstrip that's shown when you have multiple tabs in the same tabgroup. The visualViewport.height doesn't seem to take this tabstrip into account. – Pieterjan Sep 07 '21 at 17:59
  • Amazing answer! – xiao Nov 22 '21 at 01:37
  • Just as a note, if you also add `document.documentElement.style.setProperty('--viewport-height', `${visualViewport.height}px`);` before the `addEventListener`, it will adjust properly when the website is loaded (else, it would only adjust properly when the user resizes it) – Tupi Feb 10 '23 at 15:31