Lightbox2移动端异常：快速滚到底部后最后一张图灯箱错位

我使用Lightbox2实现图片灯箱效果，桌面端运行正常，但在iPhone 13 Max Pro的Safari和Chrome浏览器中出现以下异常：

• 快速滚动至页面底部（触发页面回弹效果）后点击最后一张图片，灯箱虽能触发，但页面会自动回到顶部，灯箱图片位于页面底部需滚动才能查看
• 缓慢滚动至底部未触发回弹时，点击最后一张图片灯箱显示正常

测试代码1 #

<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>

测试代码2 #

<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>

有没有人遇到过该问题？能否复现此现象？感谢解答。

内容的提问来源于stack exchange，提问作者JamesH