IPad Safari – If scrolling within iframe, you cannot scroll the page.

By Ipad

Even if you touch inside the iframe, can you continue to scroll through the webpage? This problem only occurs on iOS devices, I can’t find any solution!

My current page contains an iframe in the middle with a width of 95% and a height of about 500px, so when I reach the iframe I can no longer scroll (unless I am very close to the sides).

p>

Thank you

In my case, I can fully access the iframe and insert it dynamically Content. Nonetheless, none of the solutions suggested by Brandon S worked. My solution

>Create a transparent div covering the iframe.
>Capture any click events on the overlay And copy them in the iframe (allow the user to click the link/button)

This is because the overlay div is part of the external document, making it respond normally to touch/click events, and preventing the user from directly interacting with the iframe content .

Html template:


  style="position : absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0;"
 ng-click="$ctrl.handleOverlayClick($event)"
 >

Controller (AngularJS component)

...

constructor ($ document, $element) {
 this.iframe = $document[0].createElement('iframe');
 this.iframe.width = '100%';
 this.iframe. height = '100';
 this.iframe.sandbox ='allow-same-origin allow-scripts allow-popups allow-forms allow-top-navigation';
 const element = $element[0] .children.i tem(0);
 element.appendChild(this.iframe);
 this.contentDocument = this.iframe.contentDocument;
}

handleOverlayClick ($event) {
 // Overlay element is an invisible layer on top of the iframe. We use this to
 // capture scroll events which would be in the iframe (which don't work properly on iPad Safari)< br /> // When a click is detected, we propigate that through to the iframe so the user can click on links
 const rect = $event.target.getBoundingClientRect();
 const x = $event .clientX-rect.left; // x position within the iframe
 const y = $event.clientY-rect.top; // y position within the iframe

 // triggering click on underlaying element
 const clickedElement = this.contentDocument.elementFromPoint(x, y);
 clickedElement && clickedElement.click();
}

< p>Even if you touch inside the iframe, can you continue to scroll through the webpage? This problem only occurs on iOS devices, I can’t find any solution!

My current page contains an iframe in the middle with a width of 95% and a height of about 500px, so when I reach the iframe I can no longer scroll (unless I am very close to the sides).

p>

Thank you

In my case, I can fully access the iframe and insert its content dynamically. Nevertheless, the solutions suggested by Brandon S are all Didn’t work. My solution

>Create a transparent div covering the iframe.
>Capture any click events on the overlay and copy them in the iframe (allow the user to click on the link /Button)

This is because the overlay div is a part of the external document, so that it normally responds to touch/click events and prevents users from directly interacting with the iframe content.

Html template:< /p> 


  style="position: absolute; top: 0; right: 0; bottom : 0; left: 0; opacity: 0;"
 ng-click="$ctrl.handleOverlayClick($event)"
 >

Controller (AngularJS component)

...

constructor ($document, $element) {
 this. iframe = $document[0].createElement('iframe');
 this.iframe.width = '100%';
 this.iframe.height = '100';
 this. iframe.sandbox ='allow-same-origin allow-scripts allow-popups allow-forms allow-top-navigation';
 const element = $element[0].children.item(0);
 element.appendChild(this.iframe);
 this. contentDocument = this.iframe.contentDocument;
}

handleOverlayClick ($event) {
 // Overlay element is an invisible layer on top of the iframe. We use this to< br /> // capture scroll events which would be in the iframe (which don't work properly on iPad Safari)
 // When a click is detected, we propigate that through to the iframe so the user can click on links
 const rect = $event.target.getBoundingClientRect();
 const x = $event.clientX-rect.left; // x position within the iframe
 const y = $event. clientY-rect.top; // y position within the iframe

 // triggering click on underlaying element
 const clickedElement = this.contentDocument.elementFromPoint(x, y);
 clickedElement && clickedElement.click();
}