bug: SafeArea for iphoneX in notch

[aleleba]

Bug Report

Capacitor Version

npx cap doctor output:

💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 1.3.0

@capacitor/core: 1.3.0

@capacitor/android: 1.3.0

@capacitor/ios: 1.3.0

Installed Dependencies:

@capacitor/cli 1.3.0

@capacitor/core 1.3.0

@capacitor/android 1.3.0

@capacitor/ios 1.3.0

Affected Platform(s)

• Android
• iOS
• Electron
• Web

Current Behavior

Currently in iphone X there is no safe area for the webview, in order to see the content correctly and not overlap the notification bar.

Expected Behavior

It is desired that there is a safearea for the webview on an iPhone X, so that the content is viewed correctly and does not overlap the notification bar.

Sample Code or Sample Application Repo

Reproduction Steps

Other Technical Details

npm --version output:
6.9.0

node --version output:
v10.16.3

pod --version output (iOS issues only):
1.8.4

Other Information

[piotrblasiak]

You should use CSS for this: https://webkit.org/blog/7929/designing-websites-for-iphone-x/

If you need to know the safe area insets in JS, you can do this using this library: https://github.com/zhetengbiji/safeAreaInsets

I am doing this and it works perfectly.

[dotNetkow]

Yes, this is web/css concern, not a Capacitor one. For what it's worth, Ionic Framework handles this for you.

[brandonhudson]

FWIW, I recently had to implement this as well. The approach I took that worked was:

1. Detect the type of device using the Device API
2. Using JavaScript, fetch and match screen viewport sizes to the known sizes for iPhones/iPads with notches
3. If a match is found, append a css class to the body tag (ex: “ios”, “iphone”, "notch", etc.)
4. Create CSS styles that modify based on the platform-specific classes you create.

[aleleba]

Thanks for helping @piotrblasiak and @dotNetkow. 😁 I will try that. 😁👍

[mattsteve]

@brandonhudson I'm not a fan of this solution as it is not device agnostic. The point of the env(safe-area-inset-top) variable is if Apple releases a new iPhone you don't have to update your app to keep track of it. Capacitor should fix these environment variables.

[mcqj]

Thansk @piotrblasiak
Question: Does capacitor correctly return the CSS environment variable values as set on the underlying platform or is it necessary to use JS for that?

[piotrblasiak]

@mcqj capacitor does not provide you with those values as it's not needed - the browser that your app runs inside already has this information and you can access it using css with or without js (see links I posted previously).

[loama]

webview inside capacitor is returning 0 for env(safe-area-inset-top) in an iPhone X

[piotrblasiak]

webview inside capacitor is returning 0 for env(safe-area-inset-top) in an iPhone X

That is weird - I'm using https://github.com/zhetengbiji/safeAreaInsets without any problems.

[loama]

@piotrblasiak thanks for the fast reply, I'll try with that package. Do you know if that also works with Android?

[loama]

Forget it, I was missing the viewport-fit=cover in the meta tag. Thanks!

[piotrblasiak]

Unfortunately it does not work with android yet.

[josiahbryan]

I have viewport-fit=cover and it does not work in android either. Neither does safe-area-insets - whats the fix here? Why is this closed?

[loama]

@josiahbryan can you put basic code to reproduce your issue? This is working fine for me in multiple apps, maybe I can help.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.