Skip to content

Capacitor Plugin that exposes the safe area insets from the native iOS/Android device to your web project.

License

Notifications You must be signed in to change notification settings

capacitor-community/safe-area

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 

Safe Area Experiment

Important

The Chromium team promised the bug has been fixed as of Chromium M140.

Now it's up to the Capacitor team to correctly implement this and provide some documentation around it.

See the following issue for more info: ionic-team/capacitor#8121

History

This plugin tried to workaround a Chromium bug that caused safe area inset variables to be incorrect. Chromium incorrectly provided the CSS env variables env(safe-area-inset-*) with a 0px value. This plugin worked around that by retrieving the correct values in Kotlin and exposing them in CSS directly by using custom var(--safe-area-inset-*) variables. This worked alright. However, there were a few edge cases that were hard to catch and workaround correctly.

If you want to check out the old code and documentation, see the v7 branch

About

Capacitor Plugin that exposes the safe area insets from the native iOS/Android device to your web project.

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks