What is the reason behind lightbox not disabling scrolling?

While using the default lightbox2 CSS and JavaScript, everything is functioning correctly except for an issue on Safari mobile. When I click an image and the lightbox opens, swiping to the left reveals blank white space despite having overflow-x set to hidden. Even after disabling scrolling in the lightbox options, the problem persists. It may be related to the navbar on mobile devices, but I'm unable to pinpoint the exact cause. Any suggestions?

If you'd like to view the page on mobile, here's the link: Sushi Gen Gallery

Here's a screenshot of the problem captured on an iPhone 7 Plus (same issue occurs on a 2018 iPad): Screenshot

HTML Code:

<!DOCTYPE html>
<html lang="en">
... (HTML code continues)

Custom CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
... (CSS code continues)

Default LightBox2 CSS:

body.lb-disable-scrolling {
    overflow: hidden;
}
... (LightBox2 CSS continues)
javascripthtmlcsslightboxlightbox2

Answer №1

Admittedly, I'm still puzzled as to why this fix worked, but it did the trick. After some experimentation, I switched lightboxOverlay's positioning from absolute to fixed and that resolved all issues.

Answer №2

Looking back at this old question, it's clear that the code may require some tweaking.

The key is to define maxHeight and maxWidth in all instances of the lightbox(). For example:

$('#gallery a').lightBox({
  maxHeight: 700, 
  maxWidth: 700
});

Consider finding a javascript function that can dynamically calculate the maximum width/height based on the device. Incorporate it with this solution :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to combine an additional array into a different project attribute?

There are 2 arrays being used. This is the content of userGroups: console.log(this.items) [ { "id": 63, "name": "URLGROUP-1643836551908" } ] The contents of urls are shown below: userGroup can contain ...

javascriptarraysjson

Foundation framework enables the creation of a full width footer that stands out

I'm having trouble getting my footer panel to stretch across the entire page, it seems stuck in the center. The header at the top of the page spans the full width just fine. Am I missing something? My goal is to make both panels at the bottom of the p ...

htmlcsszurb-foundation

Error: Unexpected character encountered

When attempting to parse an array of objects enclosed in double quotes, I encountered an error: Uncaught SyntaxError: Unexpected token ' var test = "[{'key' :'D', 'value': 'Deceased Date'},{'key' ...

javascriptjqueryasp.net

user1234: I'm interested in decreasing the amount of items shown on the screen when it's smaller

Currently working on the design of the Search page for an online store. I aim to adjust the number of items displayed on the screen gradually as the screen size changes, similar to Amazon's layout. Additionally, I'm looking to rectify the excess ...

htmlcssbootstrap-5

Tips for positioning text above a dashed line in the blade template using Laravel and Bootstrap 4

I am working on a small Laravel project where I need to pass the variable {{$docno}} to a blade template. Below is the code snippet in the blade file. <body> <div class="container-fluid"> <div class="text-center"> ...

csslaravelbootstrap-4

Ways to verify if two items within a collection of objects share a common value in MongoDB

I have a collection of data called users stored in mongoDB that has the following structure: _id: ObjectId, sports: [ { name: 'cricket', history: [ { from: 10, to: 30 }, { from: 30, to: ...

javascriptmongodbexpressmongoose

How can I simulate a callback function that was not tested?

Currently experimenting with the method below: startScriptLoad(): void { const documentDefaultView = this.getDocumentDefaultView(); if (documentDefaultView) { const twitterData: ICourseContentElementEmbedTweetWidgetData = this.getTwitterWid ...

javascriptangulartypescriptunit-testingjestjs

Updating attribute values in a dynamic JSON file with Node.js: A step-by-step guide

My task involves checking if the key in input.json file matches any key in the server.json file, and then updating the value in the server.json file. The challenge lies in the fact that the server.json file is dynamic with an unpredictable structure contai ...

javascriptnode.jsjsonnpmnode-modules

Issues arise with tabbed content as default content fails to display and classes are not added upon clicking

I'm currently working on a tabbed module that consists of three tabs. Here's how it operates: When the user clicks on a carousel_element, it reveals carousel_hidden-text within that div and displays it in another div called carousel_quote. I&ap ...

javascriptjqueryhtmlcss

AngularJS parent selector nearest to the element

I have successfully implemented a code to close a custom popup using jQuery, but I am looking for a solution that utilizes AngularJS instead of jQuery. Can anyone assist me in finding the equivalent of this.closest() in AngularJS? I aim to hide .popOverla ...

javascriptangularjs

Determining the exact number of immediate descendants within a ul element, while disregarding any script elements

Here is the HTML structure I am working with, which contains a script tag: <ul id="list"> <li class="item1"><a href="#">Item 1</a></li> <li class="item2"><a href="#">Item 2</a></li> <li ...

javascriptjquery

Facing a white canvas while launching my application (Vue Router 4 - Vue 3)

I recently ran my first npm run build command to deploy my Vue3 application on a live server for testing. After uploading the files to my VPS, I encountered an issue where the server only recognizes route paths when navigated through clicks. Reloading th ...

javascriptvue.jsvue-routervue-clivuejs3

Incorporating ZeroClipboard or ZClip (button for copying to clipboard) using JQuery's Ajax functionality

Seeking to implement a 'copy to clipboard' feature triggered by clicking. However, I am facing a challenge as this functionality needs to be integrated with other content loaded using Ajax. Many plugins that achieve the same use Flash to bypass ...

javascriptjqueryajaxflash

The same HTML/CSS appears with varying appearances

I have encountered an issue where I created two identical pages, with one page calling the other through a link. Surprisingly, my top menubar changes significantly between the two pages, even though the HTML/CSS code is exactly the same. <html> < ...

htmlcssview

Proper method for incorporating loading and error messages with the help of useContext and react hooks

Currently, I have a context.js file that makes an ajax call and stores the data in an array to be shared across components. While adding some 'loading ...' text during the loading process using axios, I feel there might be a better way to handle ...

javascriptreactjs

Is the order of query execution being altered when using the MongoClient in Node.js?

I am currently developing a registration API endpoint that utilizes MongoDB to validate two specific conditions: If the username provided already exists in the database, it will return a status of 500 If the email address provided already exists in the da ...

javascriptnode.jsmongodbexpressmongodb-query

Enhanced Interactivity: jQuery UI Dialog Button Transforms Position upon Mouse Hover

I am utilizing the jQuery UI dialog feature and implementing buttons using jQuery in the following manner: $("#151").dialog({ autoOpen: false, autoResize: true, buttons: { "OK": function ...

jquerycssjquery-uistylesheet

Duplicate the form field and add a button beneath the newly generated elements

Clicking the "Add New" button below will add new fields to the form. While everything is functioning properly, I would like the newly created fields to appear above the button instead of below it. How can this be achieved? (function($) { "use strict" ...

jqueryhtmlforms

Opting for <button> over <a>

I am currently working with ReactJS in conjunction with a Bootstrap Nav Bar. Bootstrap utilizes an <a> tag for the navigation buttons. I am aiming to have the buttons scroll down to a different component on the page without resorting to using an href ...

javascripthtmlcssreactjsbootstrap-4

Challenges with locating text within the innerHtml property of a VB WebBrowser Object

Using Visual Studio 2010 with Visual Basic.NET In my project, I have created a form that utilizes a WebBrowser control to load an HTML file. Users are able to search for specific words or phrases within the document, prompting me to extract the innerHtml ...

htmlvb.netvisual-studio-2010