Android webview will not handle events correctly if iframe is present

Question

I had the following problem: I have a webview in which I load an iframe, which content document I am editing (insert text) through javascript. The fact is that when the content gets too large (the web view becomes scrollable) and when the user scrolls touch events, you will not be processed correctly - that is, the user will click somewhere and the cursor will appear in an inappropriate position or will not appear at all. This behavior is not observed if there is no iframe.

Any ideas on how to solve this problem are welcome.

Answer 1

The problem is probably related to double scrolling.

Because the iFrame has more content than it can handle, touch events are used to scroll through the iFrame. But the webview itself can also scroll, so there is great potential for weird behavior.

See what happens when the contents of the iFrame hit the edge (the user scrolls all the way up or down the iFrame). What happens if the user continues scrolling the iFrame? Should it do nothing and is there an event? Refuse iFrame scroll content? Pass an event into a web view so that it can scroll instead?

This is an ambiguous situation. The way Android responds may be incompatible based on different touch gestures, and may even differ from one version of Android to another.

You better avoid an iFrame and just change the contents of the webview directly, or give 100% the height of the iFrame and 100% width so that it occupies the entire webview.

This will prevent scrolling conflicts, and Android will no longer be confused about where to place the cursor.

Answer 2

• Set a fixed height for your iframe. <iframe ... scrolling="no" height="150px">

• Apply iScroll to the containing div in your iframe.

iScroll is available here: https://github.com/cubiq/iscroll

Here is the iScroll demo in action: http://cubiq.org/dropbox/iscroll4/examples/simple/