Lightbox Form not scrolling on mobile (iOS in particular)

Site URL: http://www.devinehealings.com

Hello,

So I have a Lightbox form on my home page (4th section) that is completely fine on desktop, however the scrolling is totally messed up on mobile. It seems to look fine upon the initial opening of the form, but once a field is selected, my phone zooms in automatically (which I have found out is due to the font-size and I wouldn't mind that happening if it wouldn't break the form).

The display of the form in a zoomed in state seems to be fixed, as the lowest text field won't show even if selected. And when trying to scroll down it only scrolls the main page beneath the actual Lightbox form. 

I have tried changing the display, position and overflow-y properties but nothing has worked. I also checked and none of the custom CSS used says anything about how the position or display has to react, yet it seems to be fixed. 

I also removed all my Custom CSS to see if any of the code is causing the issue but it remains regardless.

Please does somebody know how to fix this? I would highly appreciate your help!

Password to the site is devinehealing 

Thank you 

Hi. Have you solved this yet?

No I removed it from my website but I would like to solve it, can you help me please?

I am experiencing the same problem (cceri.org/action-teams both the "Join a Community Working Group" and "Join a Feasibility Study Team" lightbox forms). Works fine on desktop, but doesn't display the whole form on Mobile as soon as you click on a field to begin typing. You can't see the bottom field at all (although you can still type into it blindly), and scrolling up and down only moves the main page behind the form. Experiencing this issue on my iPhone XR using Safari and Chrome, although website visitors alerted me to this issue so I do not believe it to be isolated. 

I am having the same issue - any solution??

Update: I've contacted Squarespace customer support about this issue and they've confirmed that it is indeed a glitch on their end with lightbox forms on iOS, and that they are working on a fix (although no timeline was provided). Customer support suggested not using lightbox forms in the meantime.  

Was this solved? I am having a similar issue - the lightbox form (it is over a page long), it does not scroll on a windows / chrome browser desktop. But it does work on my iPad.

Any ideas?

Thanks, Mike

Try adding this to Settings > Advanced > Code Injection > Header

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>
<style>
@media screen and (max-width:640px) {
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content {
   padding-bottom: 250px !important;
  }
}
</style>

@tuanphan I found this post months later and wanted to let you know that your solution does fix this problem. Thank you! Can't believe this is still a problem.

@tuanphan I have been having this issue for months, and this fixed it! It's been a real heel and I've received complaints about this problem multiple times from my users. 

Thank you for making this so simple for someone who has no idea how to code or where to even begin!

Thank you for the code which works very well on an iPhone.

However, it needs a tweak to work on iPads. I found this worked:

• increase max-width to 2732px (for 12.9 inch iPads)
• and padding-bottom to 450px.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>
<style>
@media screen and (max-width:2732px) {
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content {
   padding-bottom: 450px !important;
  }
}
</style>

I am also experiencing a similiar problem. (https://www.novamjewelry.com/) this is the site i'm working on. And my client states that he cant scroll down properly in (https://www.novamjewelry.com/takilar) part of it(happens only on ios). For some reason it pulls to the top at some points or stuters. Tried  using what @tuanphan suggested in a similiar topic which is:

body {
    overflow-x: hidden;
}

but it it didnt fix the issue for me and since i dont know how to code i cant modify it to suit my needs. I am using some code to make gallery on the home page slide at that may be the cause of it  but if thats the case then i need another solution to make that gallery slide. So asking for help! @tuanphan

 this is the code i am using for the sliding gallery:

#page {
overflow-x:hidden
}
.gallery-grid-wrapper {
display:flex !important;
animation: slideshow 30s linear infinite
}
.gallery-grid-wrapper .gallery-grid-item {
 min-width: 35%;
 margin-right: 5%
}
@keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -180%; }
}

On 2/21/2024 at 12:35 PM, Lynseth said:

I am also experiencing a similiar problem. (https://www.novamjewelry.com/) this is the site i'm working on. And my client states that he cant scroll down properly in (https://www.novamjewelry.com/takilar) part of it(happens only on ios). For some reason it pulls to the top at some points or stuters. Tried  using what @tuanphan suggested in a similiar topic which is:

body {
    overflow-x: hidden;
}

but it it didnt fix the issue for me and since i dont know how to code i cant modify it to suit my needs. I am using some code to make gallery on the home page slide at that may be the cause of it  but if thats the case then i need another solution to make that gallery slide. So asking for help! @tuanphan

 this is the code i am using for the sliding gallery:

#page {
overflow-x:hidden
}
.gallery-grid-wrapper {
display:flex !important;
animation: slideshow 30s linear infinite
}
.gallery-grid-wrapper .gallery-grid-item {
 min-width: 35%;
 margin-right: 5%
}
@keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -180%; }
}

You mean doesn't scroll properly on this page https://www.novamjewelry.com/takilar

or on lightbox (but I can't find lightbox on this page): https://www.novamjewelry.com/takilar

On 2/24/2024 at 4:34 AM, tuanphan said:

You mean doesn't scroll properly on this page https://www.novamjewelry.com/takilar

or on lightbox (but I can't find lightbox on this page): https://www.novamjewelry.com/takilar

@tuanphan doesnt scroll down properly on that(https://www.novamjewelry.com/takilar) and its english version (https://www.novamjewelry.com/jewelryen). This happens on ios and it seems like its getting stuck on the header and getting pushed back to the top(if you push it too hard). Not sure if i identified it correctly but if you have an ios device it should be easy to notice(If not i can provide a video of it). Fiddling with site animations tab made it better but didnt solve the problem.