CODEWITHSUNDEEP
ioscssiframescrollmodal-dialog
McAsh
McAsh

Reputation: 215

iFrame modal scrolling on ipad/iphone

I'm working on a project on which I'm creating a modal. Basically, I have an overlay with position: fixed; The overlay contains an iFrame with the content of the modal. The iFrame can vary in height and when it does not fit the viewport the content gets cut off. Furthermore, when I scroll in the modal the only thing that scrolls is the background layer behind the overlay.

You are supposed to be able to scroll down in the iframe without the background layer moves. How can I achieve this?

Everything works fine in Firefox, Safari, Chrome and even in IE8. However, the issue only appears on iPad/iPhone.

You can see a working demo of the issue here: http://mcash.dk/dev/overlay/

Upvotes: 4

Views: 7120

Answers (1)

Soren Werk
Soren Werk

Reputation: 61

Basically you need to enclose the iframe in a container div and then style the container with 

-webkit-overflow-scrolling:touch

Read more here:

IFRAMEs and the Safari on the iPad, how can the user scroll the content?

Upvotes: 4

Related Questions