Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: incorrect position on mobile and overlay width thin when disable scrolling option set to true #650

Merged
merged 1 commit into from
Apr 20, 2019
Merged

Fix: incorrect position on mobile and overlay width thin when disable scrolling option set to true #650

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions src/css/lightbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
21 changes: 16 additions & 5 deletions src/js/lightbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -527,7 +538,7 @@
visibility: 'visible'
});
if (this.options.disableScrolling) {
$('html').removeClass('lb-disable-scrolling');
$('body').removeClass('lb-disable-scrolling');
}
};

Expand Down