davidtheclark/react-aria-modal

iOS Chrome Resizes window when form is selected + keyboard exited

Open

#61 ouverte le 15 mars 2018

Voir sur GitHub
 (1 commentaire) (0 réactions) (0 assignés)JavaScript (94 forks)github user discovery
bughelp wanted

Métriques du dépôt

Stars
 (1 039 stars)
Métriques de merge PR
 (Métriques PR en attente)

Description

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

Guide contributeur