In the last few days I needed to build a modal which loads a iFrame inside to display a third party content, and the target devices includes desktops, mobiles and tablets.
There is no problems to display the content on desktop, scrolling works, modal popup works. However, the frustration comes when testing on iPad and mobiles. Even when I have added “overflow: hidden” to the body tag, iPad and mobile browsers still allow users to scroll the background when modal is popped up. To fix this, I need to disable the “touchmove” event at the document level:
This actually works on iPad, though not entirely in Android. However, this actually caused another issue which causes the scrolling in the iframe very slow. It took me quite a while to find the root cause.
In the end I had to remove the “touchmove” event handling because this scrolling slowness issue is far more serious than the background content scrolling when modal is in place (my modal is about 100% over the background anyway).
