davidtheclark / react-aria-modal

A fully accessible React modal built according WAI-ARIA Authoring Practices
http://davidtheclark.github.io/react-aria-modal/demo/
MIT License
1.04k stars 96 forks source link

iOS Chrome Resizes window when form is selected + keyboard exited #61

Open conanm opened 6 years ago

conanm commented 6 years ago

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

davidtheclark commented 6 years ago

@conanm: Try setting the prop scrollDisabled={false}. Does that make a difference?

If so, the bug is related to the dependency no-scroll: https://github.com/davidtheclark/no-scroll