I'm having the following issue - I have a webview in which I load an iframe which content document i modify(insert text into) via javascript. The thing is that when the content bees too much(the webview bees scrollable) and when the user scrolls the touch events won't be handled correctly - i.e the user will tap somewhere and the cursor will appear on an inappropriate position or won't appear at all. This behaviour isnt observed when no iframe is present.

Any ideas as to how to solve this issue are wele.

I'm having the following issue - I have a webview in which I load an iframe which content document i modify(insert text into) via javascript. The thing is that when the content bees too much(the webview bees scrollable) and when the user scrolls the touch events won't be handled correctly - i.e the user will tap somewhere and the cursor will appear on an inappropriate position or won't appear at all. This behaviour isnt observed when no iframe is present.

Any ideas as to how to solve this issue are wele.

• javascript
• android
• iframe
• webview
• scroll

2 Answers 2

The problem is likely due to double-scrolling.

Since the iFrame has more content than it can handle, touch events are used to scroll the iFrame. But the webview itself can also scroll, so there's a lot of potential for weird behavior.

Consider what will happen when the iFrame content hits an edge (user has scrolled all the way up or down the iFrame). What should happen if the user continues to scroll the iFrame? Should it do nothing and eat the event? Bounce the iFrame scroll content? Pass the event to the webview so it can scroll instead?

This is an ambiguous situation. The way Android reacts may not be consistent based on different touch gestures, and may even vary from one version of Android to another.

You're better off either avoiding the iFrame and simply modifying the webview contents directly, or giving the iFrame 100% height and 100% width so that it takes up the entire webview.

This will avoid scrolling conflicts, and Android should stop being confused about where to put the cursor.

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

2. Apply iScroll on the containing div within your iframe.

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

Here's a demo of iScroll in action: http://cubiq/dropbox/iscroll4/examples/simple/