Hello!

We are facing a strange (but known) issue. In a screen of our app, we have an iframe, which loads a webpage with an iframe inside of it. In that frame there is a text input.

We run into the following problem: After tapping on the text input and the cursor appears, if the user scrolls up or down, the cursor remains in the same place while the rest move up or down. Apart from that, the focus is not on the input any more, so even though the keyboard is visible nothing happens when you try to write something. You need to tap on "Done", close the keyboard and then tap again on the input to put it on focus.

( I also tried the following. Added a simple form with two text input fields and both inputs seem to work fine.)

There are several articles in stack overflow and other forums about this problem and they mention it is a safari / iOS problem. 

(https://stackoverflow.com/questions/52826005/workaround-for-ios-10-12-webkit-safari-chrome-iframe-focus-bug)

(https://www.igorkromin.net/index.php/2016/05/20/mobile-safari-scrolling-problem-with-an-input-field-inside-a-fixed-div/)
(https://github.com/impress-org/give/issues/2239) and many more.

The problem occurs only within the app. If open the page (the one loaded in the iframe) on safari everything runs smooth and no problem occurs.

Have any of you run into such a problem? Any suggestions?

Did you try any of the fixes mentioned in the articles you linked?

Given that this is likely a Safari / iOS issue, you may want to try forums focused on Safari on iOS.

It makes sense that opening the embedded page without the iframe would not exhibit the issue, if the bug is specific to iframes in iOS Safari.


Yes I tried everything suggested in any articles I found. The strange thing is that when visiting the page (used as the source for the iFrame ) in Safari the problem doesn't occur. When I try the app installed on our test iPhones it occurs. That is why I considered maybe it is related to outsystems (even though it  possibly couldn't).

Anastasios Thomaidis wrote:

The strange thing is that when visiting the page (used as the source for the iFrame ) in Safari the problem doesn't occur. When I try the app installed on our test iPhones it occurs.

If I'm understanding you correctly, testing that way leaves out the iframe aspect entirely. If the bug is in Safari's handling of iframes and touch/input events, that would explain why it doesn't manifest when you test the underlying page.


Solution

Anastasios Thomaidis wrote:

Hello!

We are facing a strange (but known) issue. In a screen of our app, we have an iframe, which loads a webpage with an iframe inside of it. In that frame there is a text input.

We run into the following problem: After tapping on the text input and the cursor appears, if the user scrolls up or down, the cursor remains in the same place while the rest move up or down. Apart from that, the focus is not on the input any more, so even though the keyboard is visible nothing happens when you try to write something. You need to tap on "Done", close the keyboard and then tap again on the input to put it on focus.

( I also tried the following. Added a simple form with two text input fields and both inputs seem to work fine.)

There are several articles in stack overflow and other forums about this problem and they mention it is a safari / iOS problem. 

(https://stackoverflow.com/questions/52826005/workaround-for-ios-10-12-webkit-safari-chrome-iframe-focus-bug)

(https://www.igorkromin.net/index.php/2016/05/20/mobile-safari-scrolling-problem-with-an-input-field-inside-a-fixed-div/)
(https://github.com/impress-org/give/issues/2239) and many more.

The problem occurs only within the app. If open the page (the one loaded in the iframe) on safari everything runs smooth and no problem occurs.

Have any of you run into such a problem? Any suggestions?

Hi,

Might be out-of-box but just to have a try,

can you try our below Component with same:

https://www.outsystems.com/forge/component-overview/5311/safari-view-and-custom-chrome-tab


Perhaps I too have faced the same, but I need to search kinda the implement I did for it.


Hope it helps,

Assif


Solution

G. Andrew Duthie wrote:

Anastasios Thomaidis wrote:

The strange thing is that when visiting the page (used as the source for the iFrame ) in Safari the problem doesn't occur. When I try the app installed on our test iPhones it occurs.

If I'm understanding you correctly, testing that way leaves out the iframe aspect entirely. If the bug is in Safari's handling of iframes and touch/input events, that would explain why it doesn't manifest when you test the underlying page.


Maybe I didn't explained it correctly.
The screen in outsystems has only an iframe.
Within this iframe is displayed an html page that also has an iframe in it.
Trying in safari i omit the outsystems iframe, but still i have the original html document (that was displayed in the ommited iframe) which includes an iframe as I mentioned above.


assif_tiger wrote:

Anastasios Thomaidis wrote:

Hello!

We are facing a strange (but known) issue. In a screen of our app, we have an iframe, which loads a webpage with an iframe inside of it. In that frame there is a text input.

We run into the following problem: After tapping on the text input and the cursor appears, if the user scrolls up or down, the cursor remains in the same place while the rest move up or down. Apart from that, the focus is not on the input any more, so even though the keyboard is visible nothing happens when you try to write something. You need to tap on "Done", close the keyboard and then tap again on the input to put it on focus.

( I also tried the following. Added a simple form with two text input fields and both inputs seem to work fine.)

There are several articles in stack overflow and other forums about this problem and they mention it is a safari / iOS problem. 

(https://stackoverflow.com/questions/52826005/workaround-for-ios-10-12-webkit-safari-chrome-iframe-focus-bug)

(https://www.igorkromin.net/index.php/2016/05/20/mobile-safari-scrolling-problem-with-an-input-field-inside-a-fixed-div/)
(https://github.com/impress-org/give/issues/2239) and many more.

The problem occurs only within the app. If open the page (the one loaded in the iframe) on safari everything runs smooth and no problem occurs.

Have any of you run into such a problem? Any suggestions?

Hi,

Might be out-of-box but just to have a try,

can you try our below Component with same:

https://www.outsystems.com/forge/component-overview/5311/safari-view-and-custom-chrome-tab


Perhaps I too have faced the same, but I need to search kinda the implement I did for it.


Hope it helps,

Assif


Thank you Assif we will try it and get back to you!


Thanks once again Assif! It did work. I have some questions regarding the plug in but I will ask them in its support section so others can benefit as well.

Thanks Anastasios Thomaidis,

Happy to know it help you :)

Keep Coding.


Cheers,

assif_tiger