Open Mortuie opened 3 years ago
Do you have the same problem on a demo page? https://memcrab.github.io/react-pure-modal/
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?
I added to the actual example 150vh body height. Did you see the same problems in example?
@max-mykhailenko yup similar behaviour :O
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.
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?
body as tag
You can send PR or my team will check this problem when will have time.
ok i will have a look in a second
Are you talking about setting body, html to 0 i.e.
body, html {
margin: 0;
padding: 0;
}
Are you talking about setting body, html to 0 i.e.
body, html { margin: 0; padding: 0; }
As I saw, it doesn't help
I still can't really find a way of preventing / solving this issue, so if you have any thoughts feel free @max-mykhailenko
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.