Skip to content

bug: Opening on-screen keyboard in Safari and Chrome 108+ causes the entire app to be scrollable #26702

Description

@darrylnoakes

Prerequisites

Ionic Framework Version

  • v4.x
  • v5.x
  • v6.x
  • v7.x
  • Nightly

Current Behavior

In Chrome 108 and later, when the on-screen keyboard is open (e.g., an input is focused), the Visual Viewport is smaller than the Layout Viewport, causing the entire app to be scrollable (including headers, footers, etc.).

This behavior is also present in Safari, as it uses the same layout/visual viewport behavior.

Expected Behavior

The body element should be resized to the height of the Visual Viewport so that the app is not made scrollable.

Steps to Reproduce

  1. View an app that has input, using Chrome 108 or later.
  2. Focus the input, causing the OSK to open.
  3. The entire app becomes scrollable.

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI       : 6.16.3 (C:\Users\Darryl\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/vue 6.5.0

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v18.4.0 (C:\Program Files\nodejs\node.exe)
   npm    : 8.19.2
   OS     : Windows 10

Additional Information

This can probably be fixed by using CSS dynamic viewport units to set the body element to the dynamic viewport size.
Chrome 108 also includes support for these, so this change should be fully compatible.
However, I am not sure if these units account for the OSK.

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs: replythe issue needs a response from the user

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions