Fancybox Problem scrolling on iPhone

… removed the message, combined it with the first…

So… are you saying the problem has gone away with the option center on scroll disabled?

What you could do is add this rule to your Custom CSS:

html.fancybox-active, html.fancybox-active body {
  overflow: hidden;
}

When clicking on images, the frame opens, the image description (if available) is shown, but NO image, just white space.

Are you using a caching plugin with script and stylesheet concatenation? To be able to know more, I’d need to see it live but I understand you cannot keep it running like that on a production site.

No, the problem has not disappeared with “Center on scroll” deactivated, because with “Center on scroll” deactivated, of course nothing at all moves while scrolling ?? But the image should always scroll centered like before.

I have been using W3 Total Cache Plugin for many years. But the problem exists regardless of whether the cache is active or not. If I am logged in as admin, no cache is active anyway and the problem still exists. Deactivating or removing the cache plugin does not change anything at all. It has nothing to do with cache.

It’s sad, because back then, before the update, everything worked wonderfully.

There must be the possibility that you borrow an iPhone from someone? ??

PS: If I use your CSS, it is no longer possible on the desktop PC (Chrome) to scroll when an image is open. Unfortunately this is no solution.

I hope to borrow an iPhone this evening… Can you share a link to a page where you encounter this scrolling issue?

Question: why do you wish to be able to scroll the background at all?

• This reply was modified 4 years, 5 months ago by Rolf Allard van Hagen.

Because on mobile devices it is very frustrating if you look at a image, scroll accidentally or deliberately and the image stays in place somewhere on top (no longer seeing it at all).

In my case, for example, I darkened the clickable background (when the image is open) semi-transparently. If you look at an image and scroll further (whether consciously or unconsciously) the background remains visible and clickable and you have to click on this background first to close the (not visible) image and be to able to interact with the website.

This is of course independent of whether you have colorized this background or not. It is important to me that a click on the background closes the picture.

I do not want to share private information here in the forum.

But why does the solution to prevent background scrolling not work for you then? I’d say when users cannot scroll when a light box is open, all the issues you describe are solved. No?

No. The image just stays at the same place while scrolling is still possible. On the iPhone “scrolling” is not the same as “tapping”. So if you start scrolling, the image does not close and the clickable background stays as it is. And if you scroll and – whatever – want to click on another image, button or something else, you have to tap two times, which is surely confusing for visitors.

It would just be great if it behaves the way like in the past.

Ahhh, so you’re saying the CSS rule

html.fancybox-active, html.fancybox-active body {
  overflow: hidden;
}

does not prevent scrolling on iPhone? I’ll have to find a fix for that…

Argh… Safari really is the next Internet Explorer.

Please try this CSS and let me know:

html.fancybox-active, html.fancybox-active body {
	touch-action: none;
	overscroll-behavior: none;
	-webkit-overflow-scrolling: auto;
	overflow: hidden;
}

It is said to prevent scrolling on iOS 13+ but not on earlier versions…

It is unfortunately not the same like before the updates. I regret that I updated, to be honest. It worked fine in the past.

No it’s not the same. These changes are in preparation of swipe support (see the alpha version) …