Preparing your Ionic app for changes coming to Chrome for Android

With the release of Chrome 108 in late November, Chrome will change how the Layout Viewport resizes when the on-screen keyboard gets shown. This change requires developers to take action on their Ionic apps to continue to provide a good experience when using keyboards. This change only impacts Ionic apps running in Chrome for Android and does not impact Ionic apps running in Capacitor or Cordova.

Read on to learn what you can do to ensure your app continues running smoothly when these changes go live.

What do I need to change in my app?

Developers should update their apps to Ionic v6.3.5 or newer to receive code that automatically accounts for these Chrome changes.

For developers that cannot update their apps to Ionic v6.3.5 or newer, including Ionic v1-v5 apps, add the following to the viewport meta tag in your app’s index.html file:

interactive-widget=resizes-content

Full Example:

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, interactive-widget=resizes-content" />

This meta tag update will cause Chrome to use the pre-Chrome 108 layout resizing behavior.

If you have already updated to Ionic v6.3.5 you do not need to change your viewport meta tag. However, you may still make this change if you would like to continue using the legacy resize behavior.

Additional Details

More information on the details of these updates can be found in this Chrome Developers blog post. Let us know on the Ionic Forums or Twitter if you have any questions about this update!