0

The context

Hi y'all, I have made a full screen web app: it's a whatsapp clone, made for a school project. It's possibile to view the actual project live at this link and the repo is also available at this link.

The Actual Situation

  1. I have a CSS variable
height: var(--app-height);

that dynamically update when the visualViewport.height change through a function

export const setAppHeight = () => {
  let vh = visualViewport.height;

  document.documentElement.style.setProperty(
    '--app-height',
    `${visualViewport.height}px`,
  );
  
};

that is called all around the code.

The problem

The problem is:

  • When in desktop view all work as expected, the app resize itself and nothing else change.
  • When I visit the website from an iPhone (or an Android phone), all works perfectly UNTIL I hit one of the two input boxes. Suddenly, the keyboard shows and the app itself resize correctly, filling the space available in the viewport (total visualViewport, on my iPhone nearly 369px with the keyboard open, 642px with the keyboard close), but you can scroll now the page, way too much far from the app itself. I Have colored the html background (red) and the body background (yellow) so you can see all that extra space.

It's three days since I discovered this problem and I have found no solution at all, neither my teacher, my tutor or some friends that already work as developer.

The problem seems related to some strange behaviour of the input box, but just in mobile phones.

Things I tried

Things I've already tried:

  • removed the variable
  • add event listener on input focus
  • ResizeObserver object
  • preventDefault() on scrolling when clicking the input tag

What I'm trying to achieve

What I'm trying to achieve:

  • When inside the input box the app itself must stay locked to the actual view.
  • in the project I'm using a Vue framework, because it's requested.

Anyone have some clever ideas?

Thank you.

filecc
  • 56
  • 7
  • Why not just use `height: 100vh;` instead of dynamically setting this? This is essentially what you are trying to do but cutting out the JS middleman. – zero298 Apr 04 '23 at 15:11
  • Because 100vh does not care about the actual viewport, which mean you'll end up with some of your content outside, above the address bar, for example. https://dev.to/nirazanbasnet/dont-use-100vh-for-mobile-responsive-3o97 – filecc Apr 04 '23 at 15:13
  • 1
    It's difficult to debug this without grabbing the repo - but is this link any use? https://stackoverflow.com/questions/8556933/screen-styling-when-virtual-keyboard-is-active. The first answer with the `interactive-widget=resizes-content` looks promising. – user115014 Apr 04 '23 at 15:42
  • I know it's sort of a challenge to debug without grabbin'in the repo.. but, it's a very strange problem. Found that question you linked in the past days, that solution unfortunately does not work in my project. :( – filecc Apr 04 '23 at 15:50

0 Answers0