javascript html css bootstrap-4 photoswipe

PhotoSwipe image position affected by other img elements in html on mobile

I'm trying to use PhotoSwipe on my Bootstrap HTML page and I noticed that on mobile that if there is other <img> elements in the page, the images of the PhotoSwipe gallery are not showed centered of the page and some icons are not showing. In my more complex case, the images are positioned totally out of screen. On the desktop view, the positioning is correct.

Here is an example where if you remove the first image, it works correctly on mobile.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,900|Poppins:100,200,300,300i,400,500,600,700,800,900" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe.min.css" rel="stylesheet">
  </head>

  <body>
    <!-- This image causes the problem that the PhotoSwipe gallery shows below the photo out of screen (in my more complex page totally out of screen) instead of centered on the page -->
    <!-- Viewer buttons are also not visible -->
    <img src="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" alt="Free logo">

    <!-- Gallery -->
    <section id="screenshots" class="py-5">
      <div class="container">   
        <div class="row">            
          <div class="col text-center pswp-gallery">
            <h2>Screenshots</h2>
            <p>Click on the image to enlarge it</p>
            <div id="screenshots-gallery-ps">
              <a href="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" data-pswp-width="626" data-pswp-height="626">
                <img src="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" class="img-thumbnail img-fluid shadow w-25 mb-2 mr-2 mb-2 d-inline-block" alt="test">
              </a>
              <a href="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" data-pswp-width="626" data-pswp-height="626">
                <img src="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" class="img-thumbnail img-fluid shadow w-25 mb-2 mr-2 mb-2 d-inline-block" alt="test">
              </a>
              <a href="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" data-pswp-width="626" data-pswp-height="626">
                <img src="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" class="img-thumbnail img-fluid shadow w-25 mb-2 mr-2 mb-2 d-inline-block" alt="test">
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- //Gallery -->

      <!-- 3rd party JS files and scripts-->
      <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
      <script type="module">
      import PhotoSwipeLightbox from 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe-lightbox.esm.min.js';
      const options = {
        gallery:'#screenshots-gallery-ps',
        children:'a',
        pswpModule: () => import('https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe.esm.js')
      };
      const lightbox = new PhotoSwipeLightbox(options);
      lightbox.init();
    </script>
  </body>
</html>

Does anybody know how to make PhotoSwipe position the images correctly on mobile when there are other <img> elements on the page?

Solution

Positioning issue is an adverse effect of scrolling which appears once the body is overflowed by a wide image. It's necessary to make sure that no element takes more than 100% of body width.

Most likely it would be safe and beneficial to limit the max-width of all images

img {
  max-width: 100%;
}

but for demonstration purposes it's enough to select just body > img.

The swipe arrow icons are hidden on mobile devices by design. If it's really necessary that can be changed with:

body .pswp--touch .pswp__button--arrow {
  visibility: visible;
}

Snippet:

body>img {
  max-width: 100%;
}

body .pswp--touch .pswp__button--arrow {
  visibility: visible;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,900|Poppins:100,200,300,300i,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe.min.css" rel="stylesheet">


<!-- This image causes the problem that the PhotoSwipe gallery shows below the photo out of screen (in my more complex page totally out of screen) instead of centered on the page -->
<!-- Viewer buttons are also not visible -->
<img src="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" alt="Free logo">

<!-- Gallery -->
<section id="screenshots" class="py-5">
  <div class="container">
    <div class="row">
      <div class="col text-center pswp-gallery">
        <h2>Screenshots</h2>
        <p>Click on the image to enlarge it</p>
        <div id="screenshots-gallery-ps">
          <a href="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" data-pswp-width="626" data-pswp-height="626">
            <img src="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" class="img-thumbnail img-fluid shadow w-25 mb-2 mr-2 mb-2 d-inline-block"
              alt="test">
          </a>
          <a href="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" data-pswp-width="626" data-pswp-height="626">
            <img src="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" class="img-thumbnail img-fluid shadow w-25 mb-2 mr-2 mb-2 d-inline-block"
              alt="test">
          </a>
          <a href="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" data-pswp-width="626" data-pswp-height="626">
            <img src="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" class="img-thumbnail img-fluid shadow w-25 mb-2 mr-2 mb-2 d-inline-block"
              alt="test">
          </a>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- //Gallery -->


<!-- 3rd party JS files and scripts-->
<script type="module">
  import PhotoSwipeLightbox from 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe-lightbox.esm.min.js';
  const options = {
    gallery:'#screenshots-gallery-ps',
    children:'a',
    arrowKeys: true,
    pswpModule: () => import('https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe.esm.js')
  };
  const lightbox = new PhotoSwipeLightbox(options);
  lightbox.init();
</script>