How to fix fancy box/Easy Fancybox scroll not work in mobile


The Problem:

If you are working on EasyFancybox or just normal fancybox JS, and you have this problem:

In your iOS device when a popup is opened, if the page is too wide and your pop up cannot show all, when user taps and drag the screen, the background will be dragged instead of the pop-up content.

To fix, add this in your CSS:

-webkit-overflow-scrolling: touch !important;

So which element should you apply it to?

In Easy Fancybox, you will see these 2 lines:

<div id="fancybox-content"........>
        <iframe id="fancybox-frame" name...............

Apply to fancybox-content, not fancybox-frame

So in your CSS, it should be:

        overflow: scroll !important;
        -webkit-overflow-scrolling: touch !important;

It works for me, and I hope it helps someone also.


Anonymous said…
Thanks for sharing your solution :) It worked for me too

Popular posts from this blog

TCPDF How to show/display Chinese Character?

Using wget bypass htaccess username password 401 authorization

Wordpress Load balancing: 2 web servers 1 MySQL without any Cloud services