What the reason of modal window floats down smoothly while mobile keyboard activated?

Viewed 26

I have a fixed positioned modal window:

<div className={classes['UIModal'] + ' ' + classes[transition]}
    onClick={() => dispatch(modalHandler('offer'))}
>
    <div className={classes['UIModal__container'] + ' ' + classes[transition]}
        onClick={e => e.stopPropagation()}
    >
        content
    </div>
</div>

UIModal -> backdrop with size of viewport

UIModal_container -> modal box with inner content

.UIModal{
  background: rgba(0, 0, 0, 0.66);
  height: 100vh;
  width: 100vw;
  position: fixed;
  top:0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  &__container{
    background: #171717;
    padding: 10px 50px;
    border-radius: 20px;
    border: 3px solid white;
    box-shadow: 1px 1px 50px #833AB4;
 }
}

U can check it by pressing the "Консультация" button and try to input anything from mobile phone: origin

P.S. I am using npm package "disable-scroll" if any of modals opened:

const {offer, consultation} = useAppSelector(state => state.modalReducer)
 useEffect(() => {
        offer || consultation ? disableScroll.on() : disableScroll.off()
    }, [offer, consultation])
1 Answers

It was a bug due to disable-scroll library

Related