davidtheclark/react-aria-modal

iOS Chrome Resizes window when form is selected + keyboard exited

Open

#61 geöffnet am 15. März 2018

Auf GitHub ansehen
 (1 Kommentar) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (94 Forks)github user discovery
bughelp wanted

Repository-Metriken

Stars
 (1.039 Stars)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

I'm presenting a login modal using this lib, it's a baffling bug that only occurs on Chrome on iOS. It's PROBABLY a Chrome problem, tbh, but any help would be appreciated...

<AriaModal titleText="Register" onExit={()=>{this.hideRegisterModal(false);}} initialFocus="#close-button" getApplicationNode={this.getApplicationNode} underlayClass="demo-seven__underlay" dialogClass="expertRegister-modal-background" includeDefaultStyles={false} key="onboarding-modal" ref={c => this.container = c} >

Here's the code in .jsx ^

And CSS:

// MODAL STYLES .demo-seven__underlay position: fixed top: 0px left: 0px bottom: 0px right: 0px background-color: rgba(0,0,0,0.5) z-index: 2

.expertRegister-modal-background position: fixed top: 5px left: 5px bottom: 5px right: 5px z-index: 3 overflow: scroll background-size: cover border-radius: 5px box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5) background-image: linear-gradient(151deg, rgba(231, 61, 74, 1), #e73d8b)

Here's what it looks like: Keyboard presented: img_0291

Keyboard hidden: img_0292

What's annoying is, for the rest of the app any time I present a modal (with form field) it renders like this (50% or so of the height cut off). And this area isn't scrollable really. It's a bizzare bug.

Thanks

Contributor Guide