Self Styled modal in the template of react-pure-modal

[Mortuie]

I was wondering if anyone else had come up with a similar issue, when styling/using a modal. The highlighted area in blue signifies where the mozilla firefox url bar goes. This is on an android mobile phone using Mozilla Firefox.

When i then scroll up on the modal itself the url bar appears. The styling I have used is inspired by the styling for the react pure modal components.

[max-mykhailenko]

Do you have the same problem on a demo page? https://memcrab.github.io/react-pure-modal/

[Mortuie]

No however the actual demo page isn't scrollable, whereas the url bar only disappears on firefox when the page is scrollable. when I say page I mean the page where all your buttons are i.e. "open scrollable modal....." etc...

I tried using most of your css for the backdrop & modal which is of the form:

const Backdrop = styled.div`
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

const ModalContainer = styled.div`
  transform: translate(0px, 0px);
  transition: none 0s ease 0s;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  max-height: 100%;
  min-height: 100%;
  z-index: 1041;
  background-color: white;
`;

And then the react setup is

<Backdrop onClick={() => setModal(false)}>
        <ModalContainer
          onClick={e => {
            e.stopPropagation();
            e.preventDefault();
          }}
        >
          <input placeholder="HERE" />
        </ModalContainer>
      </Backdrop>

i've tried playing around with autofocus on the input but that doesn't seem to change anything do you have any idea?

[max-mykhailenko]

I added to the actual example 150vh body height. Did you see the same problems in example?

[Mortuie]

@max-mykhailenko yup similar behaviour :O

[max-mykhailenko]

I'm finally detect it. So problem happens when modal contains input and keyboard is opened. Body in this case has additional undetectable bottom margin/padding.

[Mortuie]

What do you mean by the "body" and also have you thought of a solution ? Do you have discord and we can maybe have a chat about this solution?

[max-mykhailenko]

body as tag

You can send PR or my team will check this problem when will have time.

[Mortuie]

ok i will have a look in a second

[Mortuie]

Are you talking about setting body, html to 0 i.e.

body, html {
    margin: 0;
    padding: 0;
}

[max-mykhailenko]

Are you talking about setting body, html to 0 i.e.

body, html {
    margin: 0;
    padding: 0;
}

As I saw, it doesn't help

[Mortuie]

I still can't really find a way of preventing / solving this issue, so if you have any thoughts feel free @max-mykhailenko