Fix iframe overflow on iPad (and other touch devices)

First, we need to check if this is a touch device, regardless if it’s an iPhone, iPad, Droid or Galaxy. One thing they have in common, is the TouchEvent event. So we’ll write a small function to test if it exists in this device.

/**
 * Test if touch event exists
 * @returns {Boolean} True if device supports touch events.
 */
function is_touch() {
    try {
        document.createEvent( 'TouchEvent' );
        return true;
    } catch(e) {
        return false;
    }
}

and let’s use it to add a CSS class to the body if it’s a touch device.

window.addEventListener('DOMContentLoaded', () => {
    if ( is_touch() ) {
        document.body.classList.add( 'fix-iframe' );
    }
});

So now let’s add the CSS to make our iframes properly scrollable, with no overflowing. In this case I wanted to fix this in the PrettyPhoto frame:

.fix-iframe .pp_content,
.fix-iframe #pp_full_res,
.fix-iframe #pp_full_res iframe {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

First, we need to check if this is a touch device, regardless if it’s an iPhone, iPad, Droid or Galaxy. One thing they have in common, is the TouchEvent event. So we’ll write a small function to test if it exists in this device.