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...
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.
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