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

Hi

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:

#fancybox-content{
        overflow: scroll !important;
        -webkit-overflow-scrolling: touch !important;
}

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