My modal fixed position works well on desktop, but it doesn't work well on mobile devices and I don't understand why.
https://probaka.netlify.app/kiemelt.html
On this page in the first section when a click the images a modal window opening, but when a click on the image on a mobile device then my modal window opens too high, not the top of the viewport.
My CSS:
.modal {
opacity: 0;
pointer-events: none;
visibility: hidden;
width: 100vw;
top: 0;
position: fixed;
height: 100vh;
overflow-y: scroll;
transition: opacity 0.5s;
}
.modal--open {
opacity: 1;
pointer-events: auto;
visibility: visible;
background-color: rgba(255, 238, 177, 0.7);
}
@supports (backdrop-filter: blur(5px)) {
.modal--open {
backdrop-filter: blur(5px);
background-color: rgba(255, 238, 177, 0.15);
}
}
.modal-inner {
padding: 2.4rem;
display: flex;
justify-content: center;
}
.modal--open .count-img-box-img {
width: 60%;
}
My HTML
<div class="modal"><div class="modal-inner"></div></div>
<div class="count-gallery">
<figure class="count-img-box">
<img
src="/img/nepszavazas/arpad_utca.jpg"
alt="Árpád utca adatai"
class="count-img-box-img"
loading="lazy"
/>
<figcaption class="caption">Árpád utca</figcaption>
</figure>
<figure class="count-img-box">
<img
src="/img/nepszavazas/belso_dulo.jpg"
alt="Belső dűlő adatai"
class="count-img-box-img"
loading="lazy"
/>
<figcaption class="caption">Belső dűlő</figcaption>
</figure>
<figure class="count-img-box"> </div>
.modal {
opacity: 0;
pointer-events: none;
visibility: hidden;
width: 100vw;
top: 0;
position: fixed;
height: 100vh;
overflow-y: scroll;
transition: opacity 0.5s;
}
.modal--open {
opacity: 1;
pointer-events: auto;
visibility: visible;
background-color: rgba(255, 238, 177, 0.7);
}
@supports (backdrop-filter: blur(5px)) {
.modal--open {
backdrop-filter: blur(5px);
background-color: rgba(255, 238, 177, 0.15);
}
}
.modal-inner {
padding: 2.4rem;
display: flex;
justify-content: center;
}
.modal--open .count-img-box-img {
width: 60%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="modal">
<div class="modal-inner"></div>
</div>
<div class="count-gallery">
<figure class="count-img-box">
<img src="/img/nepszavazas/arpad_utca.jpg" alt="Árpád utca adatai" class="count-img-box-img" loading="lazy" />
<figcaption class="caption">Árpád utca</figcaption>
</figure>
<figure class="count-img-box">
<img src="/img/nepszavazas/belso_dulo.jpg" alt="Belső dűlő adatai" class="count-img-box-img" loading="lazy" />
<figcaption class="caption">Belső dűlő</figcaption>
</figure>
<figure class="count-img-box"></figure>
</div>
</body>
</html>
Modal is working but is on top of the page. You need to put a scroll event to top of the page when model is fired.
.scroll()- if you use jQueryelement.scrollIntoView()- if you use vanilla JavaScript