Skip to content

Instantly share code, notes, and snippets.

@bramus
Last active October 17, 2022 03:46
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bramus/f98304c048c943c6c5e6333d1864be40 to your computer and use it in GitHub Desktop.
Save bramus/f98304c048c943c6c5e6333d1864be40 to your computer and use it in GitHub Desktop.
Interop 2022 Viewport Investigation: Behavior on a Windows Touch Screen Device

Windows On-Screen Keyboard vs. Viewports

Setup / General

  • Device: Dell XPS 13 9380 with Windows 10 Enterprise (19044.1949)
  • I had to enable a few things before I could trigger the OSK / show the button in the task bar
    • Don't recall which ones though :-/
  • Windows has various concepts for the OSK. If you hit CTRL+WIN+O for example a totally different OSK - one that floats and cannot be docked - pops up

The Good

The Visual Viewport resizes as you focus an input.

  • When focusing touch the OSK always pops up, even if your device has a keyboard attached (eg a laptop)
  • When focusing using the mouse, the OSK only pops up if you have no keyboard attached.
    • Using the button near the clock you can pop it up

image

It also eats away some space for non-maximized windows (!!)

image

The Bad

Buggy behavior in Chrome/Edge

There's a bug where the behavior no longer works (in both tested Chrome 105 and Edge 105) for whatever reason when focusing with the mouse (and hitting the OSK button in the taskbar). Saw it happen after grabbing a printscreen, but cannot constantly reproduce.

image

The fix is to perform some kind of touch on the glass and refocus the input.

ℹ️ When this buggy behavior in Chrome/Edge is present, Firefox still does things correctly, confirming it's a Chromium-specific bug.

Firefox resizes everything

Screenshot of Firefox 105: it resizes all viewports+ the icb

image

Something weird with the ICB going on as well: it becomes 1px wider when the OSK is shown.

image

image

It looks like firefox resizes the entire window when the OSK is shown. Take a look at the bottom right scrollbar arrow. That one is not present in Chrome/Edge

image

This can be confirmed by looking at window.innerHeight but my test machine decided to do an update instead and I’ve been looking at this screen for 20 minutes by now …

584606E2-13F5-4A74-AEB8-59EA5017D3B7_1_102_o

Update, another 15 minutes later: The window does get resized indeed, which explains all the resize behavior

image

image

Question now could is: what happens if Firefox did not resize the window?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment