The problem

There is long standing bug in Mobile Safari https://bugs.webkit.org/show_bug.cgi?id=153852.

This solution

This React component implements solution described in https://www.eventbrite.com/engineering/mobile-safari-why/ e.g. it always shows top and bottom bars in the Mobile Safari.

Table of Contents

• Installation
• Usage
• Inspiration
• Other Solutions
• Contributors
• LICENSE

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install --save mobile-safari-fullscreen

Usage

import FullScreen from 'mobile-safari-fullscreen'
import styles from 'mobile-safari-fullscreen/index.module.css'

;<FullScreen classNames={styles} isOpen={isOpen}>
  <YourModalHere isOpen={isOpen} />
</FullScreen>

Inspiration

https://www.eventbrite.com/engineering/mobile-safari-why/

Other Solutions

I'm not aware of any, if you are please make a pull request and add it here!

Contributors

Thanks goes to these people (emoji key):

stereobooster 💻 📖 🚇 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT