Search code examples
javascripthtmlcsslightboxlightbox2

Why doesn't lightbox disable scrolling?

I am using the default lightbox2 css and javascript. First, everything is working great except for one problem with safari mobile. When I click an image and the lightbox appears, if I swipe to the left it shows all of this blank white space, even though I have overflox-x set to hidden. I even used the option in lightbox to disable scrolling when the lightbox is open but it doesn't seem to be working. It's possible it has to do with the nav bar on mobile but I can't figure it out. Any ideas?

Here is a link to the page in question if you want to visit it on mobile: https://asnyder002.github.io/SushiGen/gallery.html

Here is an image of the problem taken on an IPhone 7 Plus, same problem occures on a 2018 IPad: https://ibb.co/hK8QPNp

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, viewport-fit=cover, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <link rel="stylesheet" type="text/css" href="galleryStyle.css">
    <link rel="stylesheet" type="text/css" href="lightbox.css">
    <script src="lightbox-plus-jquery.min.js"></script>
    <script>
        lightbox.option({
          'disableScrolling': true
        })
    </script>
    <title>Sushi Gen</title>
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <h4>Sushi Gen</h4>
            </div>
            <ul class="nav-links">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="menu.html">Menu</a>
                </li>
                <li>
                    <a href="gallery.html">Gallery</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
            <div class="burger">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>
        </nav>
        <div class="titleContainer">
            <h1>Gallery</h1>
        </div>
    </header>
    <main>
        <div class="gallery">
            <a href="./img/img1.jpg" data-lightbox="mygallery"><img src="./img/img1_tn.jpg"></a>
            <a href="./img/img2.jpg" data-lightbox="mygallery"><img src="./img/img2_tn.jpg"></a>
            <a href="./img/img3.jpg" data-lightbox="mygallery"><img src="./img/img3_tn.jpg"></a>
            <a href="./img/img4.jpg" data-lightbox="mygallery"><img src="./img/img4_tn.jpg"></a>
            <a href="./img/img5.jpg" data-lightbox="mygallery"><img src="./img/img5_tn.jpg"></a>
            <a href="./img/img6.jpg" data-lightbox="mygallery"><img src="./img/img6_tn.jpg"></a>
            <a href="./img/img7.jpg" data-lightbox="mygallery"><img src="./img/img7_tn.jpg"></a>
            <a href="./img/img8.jpg" data-lightbox="mygallery"><img src="./img/img8_tn.jpg"></a>
            <a href="./img/img9.jpg" data-lightbox="mygallery"><img src="./img/img9_tn.jpg"></a>
            <a href="./img/img10.jpg" data-lightbox="mygallery"><img src="./img/img10_tn.jpg"></a>
            <a href="./img/img11.jpg" data-lightbox="mygallery"><img src="./img/img11_tn.jpg"></a>
            <a href="./img/img12.jpg" data-lightbox="mygallery"><img src="./img/img12_tn.jpg"></a>
            <a href="./img/img13.jpg" data-lightbox="mygallery"><img src="./img/img13_tn.jpg"></a>
            <a href="./img/img14.jpg" data-lightbox="mygallery"><img src="./img/img14_tn.jpg"></a>
            <a href="./img/img15.jpg" data-lightbox="mygallery"><img src="./img/img15_tn.jpg"></a>
            <a href="./img/img16.jpg" data-lightbox="mygallery"><img src="./img/img16_tn.jpg"></a>
            <a href="./img/img17.jpg" data-lightbox="mygallery"><img src="./img/img17_tn.jpg"></a>
            <a href="./img/img18.jpg" data-lightbox="mygallery"><img src="./img/img18_tn.jpg"></a>
            <a href="./img/img19.jpg" data-lightbox="mygallery"><img src="./img/img19_tn.jpg"></a>
            <a href="./img/img20.jpg" data-lightbox="mygallery"><img src="./img/img20_tn.jpg"></a>
            <a href="./img/img21.jpg" data-lightbox="mygallery"><img src="./img/img21_tn.jpg"></a>
            <a href="./img/img22.jpg" data-lightbox="mygallery"><img src="./img/img22_tn.jpg"></a>
            <a href="./img/img23.jpg" data-lightbox="mygallery"><img src="./img/img23_tn.jpg"></a>
            <a href="./img/img24.jpg" data-lightbox="mygallery"><img src="./img/img24_tn.jpg"></a>
            <a href="./img/img25.jpg" data-lightbox="mygallery"><img src="./img/img25_tn.jpg"></a>
            <a href="./img/img26.jpg" data-lightbox="mygallery"><img src="./img/img26_tn.jpg"></a>
            <a href="./img/img27.jpg" data-lightbox="mygallery"><img src="./img/img27_tn.jpg"></a>
        </div>
    </main>
    <footer>
        <div class="footerBox" id="locationBox">
            <h3 class="footerHeading">Location</h3>
            <h4 class="city">Bossier</h4>
            <p class="address">
                2300 Airline Dr.<br>
                Bossier City, LA 71111<br>
                (318) 584-7320
            </p>
            <h4 class="city">Shreveport</h4>
            <p class="address">
                6607 Line Ave.<br>
                Shreveport, LA 71106<br>
                (318) 219-7979
            </p>
        </div>
        <table class="footerBox">
            <th class="footerHeading">Hours</th>
            <tr><th>Sunday</th></tr>
            <tr><td>12pm - 9pm</td></tr>
            <tr><th>Monday - Thursday</th></tr>
            <tr><td>11am - 2:30pm, 4:30pm - 10pm</td></tr>
            <tr><th>Friday</th></tr>
            <tr><td>11am - 2:30pm, 4:30pm - 10:30pm</td></tr>
            <tr><th>Saturday</th></tr>
            <tr><td>11am - 10pm</td></tr>
        </table>
    </footer>
    <script src="sushiGen.js"></script>
</body>
</html>

Custom CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

header {
    position: relative;
    width: 100%;
    height: 70vh;
    max-width: 100vw;
    background-color: #464646;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("./img/gallery.jpg");
    background-size: cover;
}

.titleContainer{
    display: flex;
    color: rgb(226, 226, 226);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    height: 62vh;
    font-family: 'Montserrat', sans-serif;
}


.titleContainer h1 {
    margin: 0;
    padding: 0;
    font-size: 55px;
    font-weight: 100;
}

nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    height: 8vh;
    font-family: 'Raleway', sans-serif;
}

.logo{
    color: rgb(226, 226, 226);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

.nav-links{
    display: flex;
    justify-content: space-around;
    width: 30%;
}

.nav-links li{
    list-style: none;
}

.nav-links a{
    color: rgb(226, 226, 226);
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}
.burger{
    display: none;
}

.burger div{
    width: 25px;
    height: 3px;;
    background-color: rgb(226, 226, 226);
    margin: 5px;
    transition: all 0.3s ease;
}

.gallery {
    margin: 50px 50px;
    display: flex;
    justify-content: center;
    flex-flow: wrap;
}

.gallery img{
    transition: 1s;
    padding: 15px;
    width: 200px;
}

.gallery img:hover {
    filter: grayscale(100%);
    transform: scale(1.1);
}

footer{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 5%;
    padding-bottom: 5%;
    background-color: #464646;
    padding-left: 15%;
    padding-right: 15%;
    font-family: 'Lato', sans-serif;
}

.footerBox {
    color: rgb(226, 226, 226);
}

.footerHeading{
    font-size: 25px;
    padding-bottom: 40px;
}

.city{
    font-size: 20px;
    margin-bottom: 10px;
}

.address{
    margin-bottom: 35px;
    line-height: 23px;
}

th {
    text-align: left;
}

td {
    text-align: left;
    padding-top: 3%;
    padding-bottom: 3%;
}

@media screen and (max-width:1024px){

    header {
        background-attachment: scroll;
    }

    .nav-links{
        width: 60%;
    }

    #locationBox{
        margin-right: 15%;
    }

}

@media screen and (max-width:768px){
    body{
        overflow-x: hidden;
    }

    header {
        background-attachment: scroll;
    }

    .line{
        width: 275px;
        height: 3px;
    }

    .nav-links{
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: rgba(0, 0, 0, 0.9);
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }

    .nav-links li{
        opacity: 0;
    }


    .burger{
        display: block;
        cursor: pointer;
    }

    footer{
        padding-left: 5%;
        padding-right: 5%;
    }
    .footerHeading{
        padding-bottom: 25px;
    }

}

.nav-active{
    transform: translateX(0%);
}

@keyframes navLinkFade{
    from{
        opacity: 0;
        transform: translateX(50px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}

.toggle .line1{
    transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2{
    opacity: 0;
}
.toggle .line3{
    transform: rotate(45deg) translate(-5px, -6px);
}

Default LightBox2 CSS

body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
  outline: none;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
Solution

  • Honestly, still trying to figure out why this was the solution but it works. After some trial and error, I changed lightboxOverlay's position to fixed instead of absolute and I have no more problems.