<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightbox Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css">
</head>
<div>
<a href="https://loremflickr.com/320/240?random=1" data-lightbox="test" data-title="test1">
<img src="https://loremflickr.com/320/240?random=1" />
</a>
<a href="https://loremflickr.com/320/240?random=2" data-lightbox="test" data-title="test2">
<img src="https://loremflickr.com/320/240?random=2" />
</a>
<a href="https://loremflickr.com/320/240?random=3" data-lightbox="test" data-title="test3">
<img src="https://loremflickr.com/320/240?random=3" />
</a>
<a href="https://loremflickr.com/320/240?random=4" data-lightbox="test" data-title="test4">
<img src="https://loremflickr.com/320/240?random=4" />
</a>
<a href="https://loremflickr.com/320/240?random=5" data-lightbox="test" data-title="test5">
<img src="https://loremflickr.com/320/240?random=5" />
</a>
<a href="https://loremflickr.com/320/240?random=6" data-lightbox="test" data-title="test6">
<img src="https://loremflickr.com/320/240?random=6" />
</a>
<a href="https://loremflickr.com/320/240?random=7" data-lightbox="test" data-title="test7">
<img src="https://loremflickr.com/320/240?random=7" />
</a>
<a href="https://loremflickr.com/320/240?random=8" data-lightbox="test" data-title="test8">
<img src="https://loremflickr.com/320/240?random=8" />
</a>
<a href="https://loremflickr.com/320/240?random=9" data-lightbox="test" data-title="test9">
<img src="https://loremflickr.com/320/240?random=9" />
</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.js"></script>So I have five images as per the html sample below. Lightbox2 works fine on desktop. On iPhone 13 Max Pro, using both Safari and Chrome, I see the following behaviour:
If I scroll 'quickly' down to the last image (such that the page 'bounces' when it hits the bottom) then subsequently clicking on that last image will produce the required lightbox, but the whole page will reload to the top of the page and the light-boxed image (the last one on the page) cannot be seen. It is down at the bottom, to which you then have to scroll to find it. And there it is, presenting itself as expected. Clicking on all other images produces lightboxes perfectly positioned, in focus, as expected.
If I scroll 'slowly' to the bottom of the page, and not 'bounce' the bottom of the page, then all works perfectly as expected for the last image when it is pressed.
Has anyone seen this behaviour? Can anyone reproduce it? Thank you.
`<html lang="en" dir="ltr">
<head>
<style>
.gallery img {
max-width: 100%;
padding: 5px 0;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightbox Test</title>
<link rel="stylesheet" href="lightbox.css">
</head>
<body>
<div class="gallery">
<a href="images/test/pic1.jpg" data-lightbox="test" data-title="test1">
<img src="images/test/pic1.jpg">
</a>
<a href="images/test/pic2.jpg" data-lightbox="test" data-title="test2">
<img src="images/test/pic2.jpg">
</a>
<a href="images/test/pic3.jpg" data-lightbox="test" data-title="test3">
<img src="images/test/pic3.jpg">
</a>
<a href="images/test/pic4.jpg" data-lightbox="test" data-title="test4">
<img src="images/test/pic4.jpg">
</a>
<a href="images/test/pic5.jpg" data-lightbox="test" data-title="test5">
<img src="images/test/pic5.jpg">
</a>
</div>
<script src="lightbox-plus-jquery.js"></script>
</body>
</html>
`