iOS Chrome Resizes window when form is selected + keyboard exited

[conanm]

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:

Keyboard hidden:

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]

@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