WebHTMLVIewer, iOS, and Scrolling

Targets Web
1

I’m having some trouble getting proper scrolling in a WebHTMLView located on my page. The web view is holding plain HTML text. I have the webview centered in my page with a button below. After the page loads, occasionally I can scroll the contents of the web view (loaded from a local project-embedded HTML file) but occasionally, the whole page itself will scroll. I believe i’ve correctly set the headers:

For iphone:
HTMLHeader = “<meta name=”“viewport”" content="“initial-scale=1, user-scalable=no”" />"

For iPad:
HTMLHeader = “<meta name=”“viewport”" content="“initial-scale=1.4, user-scalable=no”" content="“width=1012"”/>"

The larger initial scale nicely enlarges the UI elements. All elements are contained within the viewport with a buffer of 20 pixels or so all around.

So far so good. The page rubber-bands on iPhone and iPad when I try to scroll past which I assume means the page is equal to or smaller than the viewport. But trying to scroll the contents of the webview is extremely frustrating because it sometimes scrolls the page and sometimes scrolls the web view; I can’t seem to find the rhyme or reason. It will sometimes work flawlessly, and then the page will “catch” my touches and won’t let go. Tapping or double tapping sometimes brings it back. It also seems to happen worse on iPad and less frequently on iPhone.

I’ve been playing around with the position controls, me.height/widths, layouts, headers but the problems persists. I’ve searched and have not found anyone having a similar problem. I hope I’m missing something obvious!

2

I encountered this last year when we were coding the web app for XDC. The problem manifests when you first drag in a direction that causes the page to bounce or scroll. Once you’ve done that, you actually need to let the view “settle down” before trying to scroll again. If you don’t, you get this problem where it seems to follow you around.

3

Yes that’s a good description of the issue. Do you know if it’s possible to prevent the bouncing? I thought it shouldn’t happen since the viewport is smaller than the screen. And some web apps, like gmail, don’t seem to be able to be grabbed and moved beyond the viewport.

Rich

4

I’d have to look and see what we did. It’s been a year and all I remember is Xojo code that says:

ctl.preventBounce

:slight_smile:

5

Sounds like a feature request to me. I just found your blog post where you solved the problem with nesting divs and websdk but that’s beyond my current skill level. Thanks for the pointers.
Rich

6

Just for a laugh, I viewed my problem page in Chrome/Mac with user-agent switcher set to iPad. I see two scroll bars, one tracking the HTMLView content, the other tracking something else. This seems to be the cause of the unpredictable HTML scrolling. It would also explain why centering the web view has been so weird (always 4 or 5 pixels off). Has anyone had luck easily removing this?