From 51efea4fb0cb9e9c6abfaf7bc2098b416ff02f4a Mon Sep 17 00:00:00 2001
From: Lokesh Dhakar <lokesh.dhakar@gmail.com>
Date: Sat, 20 Apr 2019 16:34:19 -0700
Subject: [PATCH] Fix: incorrect position on mobile and overlay width thin when
 disablescrolling option set to true

---
 src/css/lightbox.css |  6 +-----
 src/js/lightbox.js   | 21 ++++++++++++++++-----
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/css/lightbox.css b/src/css/lightbox.css
index a95d45a4..99a025f0 100644
--- a/src/css/lightbox.css
+++ b/src/css/lightbox.css
@@ -1,9 +1,5 @@
-html.lb-disable-scrolling {
+body.lb-disable-scrolling {
   overflow: hidden;
-  /* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
-  position: fixed;
-  height: 100vh;
-  width: 100vw;
 }
 
 .lightboxOverlay {
diff --git a/src/js/lightbox.js b/src/js/lightbox.js
index 2b1e9e00..7fdbf18f 100644
--- a/src/js/lightbox.js
+++ b/src/js/lightbox.js
@@ -256,7 +256,7 @@
 
     // Disable scrolling of the page while open
     if (this.options.disableScrolling) {
-      $('html').addClass('lb-disable-scrolling');
+      $('body').addClass('lb-disable-scrolling');
     }
 
     this.changeImage(imageNumber);
@@ -356,9 +356,20 @@
 
   // Stretch overlay to fit the viewport
   Lightbox.prototype.sizeOverlay = function() {
-    this.$overlay
-      .width($(document).width())
-      .height($(document).height());
+    var self = this;
+    /*
+    We use a setTimeout 0 to pause JS execution and let the rendering catch-up.
+    Why do this? If the `disableScrolling` option is set to true, a class is added to the body
+    tag that disables scrolling and hides the scrollbar. We want to make sure the scrollbar is
+    hidden before we measure the document width, as the presence of the scrollbar will affect the
+    number.
+    */
+    setTimeout(function() {
+      self.$overlay
+        .width($(document).width())
+        .height($(document).height());
+
+    }, 0);
   };
 
   // Animate the size of the lightbox to fit the image we are showing
@@ -527,7 +538,7 @@
       visibility: 'visible'
     });
     if (this.options.disableScrolling) {
-      $('html').removeClass('lb-disable-scrolling');
+      $('body').removeClass('lb-disable-scrolling');
     }
   };