Iframe click event detect problem after scroll content

1

On ios 8, i use iframe to load the page, when we scrolling the page, the link on the page can’t click, then we scroll back to default position, the click is available How can i fix this problem? BTW, On ios 7, there are no this problem.

2

Hi gary,

i dont use Ionic. But i have the same issue with my Apps using cordova and iFrames under iOS8. It looks like a bug in iOS8. Do you have any resolution or workarround for this?

Mario

3

Hi,
please see these topics


and

4

Hi fabioc, thank you for the links! Unfortunately setting the focus to the iframe don’t solve the problem.
I’m using a iframe with 100% height inside a wrapper div. The div scrolls with -webkit-overflow-scrolling: touch. The scrolling works fine. But with iOS8, i can’t click any link or other element when i scroll down outside the inital viewable area.
For testing, i have bind a touchend event to the body-tag inside the iframe. The event is only fired inside the initial viewable area. It looks like, no touch or click events will fired outside the initial viewable part from the iframe when you scrolling down.

Gary describes the same problem 23 days ago. My hope was, he have found a solution.

5

We’ve been experiencing the exact same problem using Chrome in the iPad and would love to hear of a fix.

We have found that it misbehaves less when using Safari and is, at least, useable.

6

I have same problem with ios8.

Any news for resolve this issue?

7

The issue in my Apps (Apache Cordova - UIWebView) was resolved with iOS 8.1.

8

9

Can anyone able to solve this problem?
I also have the same in iphone.

10

I made some change in iframe size and it works.
I frame just need to be open in proper screen size.

11

I still have this problem

12

Can you please show us your full code from html page and css ? so that i can help you.
It must be a css problem, iframe css and your content css might be conflict.
If you can show your code then only i can find an error.

13 
<ion-content overflow-scroll='true' padding class ="has-header page-content has-footer" [ngStyle]="{'background-color': style.pageBG, 'color':style.textColor}">
    
<iframe sandbox="allow-forms allow-scripts allow-same-origin allow-popups" id="iframe"  class="iframe-full" [src]="url"  ></iframe>

</ion-content>


.iframe-full{
    position:absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    overflow: scroll; 
    z-index: 1000;
    height: 116%;
    width:100%;
    background: white;
    border: none;
    -webkit-overflow-scrolling: touch !important;
    overflow: scroll !important;
   
}
14

First remove this overflow: scroll & overflow: scroll !important.
You can not give css like this.
Then, try with position relative instead of absolute.
width of iframe should be 100% not more then 100%.
Try with this and let me know.

15

No still the same. Click doesn’t work.

16

can you mail me your complete page code in which you have this problem?
My mail id is abhishek.esprit@gmail.com.
i will get back to you after figure it out.

17

i have same problem.
After scrolling, hyperlink is not working.
But in first view area, it working.
Is there anyone with have any solution?