The supportZoom attribute invalidates env(safe-area-inset-bottom) in css

[hellohejinyu]

• I have read the Getting Started section
• I have already searched for the same problem

Environment

Technology	Version
Flutter version	3.16.3
Plugin version	6.0.0-beta.31
Android version	x
iOS version	17.0
macOS version	x
Xcode version	15.0.1
Google Chrome version	x

Device information: iPhone 15 Pro

Description

Expected behavior:

env(safe-area-inset-bottom) can work normally

Current behavior:

When the supportZoom attribute is set to false, env(safe-area-inset-bottom) in css will be invalid.

Steps to reproduce

1. git clone [email protected]:hellohejinyu/safe_area.git, download and run the repository code;
2. change the supportZoom property value in InAppWebViewSettings.

Images

• supportZoom is true, everything is fine

• supportZoom is false

[github-actions]

👋 @hellohejinyu

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

[hjhjdev]

This bug still exits. any ways to solve this?

[hlhc]

SupportZoomJS.swift#L26

Because the disable zoom script currently replaces the viewport meta tag completely and removes the viewport-fit=cover that you originally had. Simply pass supportZoom: true and add width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0 to disable zoom.