Web listbox slow on iDevices

Targets Web
1

This is not a Xojo specific issue and is known to be an issue wit iDevices but when you scroll a listbox that has more than a page of content then it is really sticky and slow to move through the list of items.

I have been looking into this for a while and whilst their is a solution it appears that the solution needs to be applied directly to the framework.css file in the WebFrameworks/Listbox folder. The weird thing is (and this is also documented) that sometimes you cant apply the CSS later which is what I have tried to do by adding the change to the HTML Header or as a Pagesource but neither of the have the desired result but if you edit the framework.css directly and recompile then you will find your listbox is much smoother on iDevices and old Android devices (appears not to be needed on new versions but makes no difference if you have it in the css file). The line I have added is the last line in the style information below but you need to be aware that it has a slightly odd result if you try and scroll the list before it has finished loading the data but I think the odd is worth the gain of smooth scrolling.

Maybe Paul could look at adding this to the default framework.css so that everyone can benefit.

div.listbox > div.content { position: absolute; left: 0px; right: 0px; bottom: 0px; top: 21px; overflow: hidden; -webkit-overflow-scrolling: touch; }

The magic line is “-webkit-overflow-scrolling: touch;” and needs to be in the “div.listbox > div.content” if you put it anywhere else it has horrid results (the list doesnt scroll etc).

2

Paul has nothing to do with the web framework beyond documentation

3

Oops, brain overload, I meant Greg, brains knew it was Gregs baby but fingers thought they would type Paul!!! :wink:

4

I’d also make sure you file a feature request for things like this

5

It’s better form to do the CSS magic with JavaScript.

6

My JS and DOM knowledge is not great which is why I leave it to people like you to do web clever stuff :wink:

It is a bit of an odd workaround which does make the scrolling much faster and smoother but only after everything is loaded. Not sure if anyone has made a web lazy listbox that loads pages in the background as this might help although I think it may be an iDevice thing and a choice between better speed and slightly odd behavior or slower and good behavior.

7

It may be that I have the style applied to the wrong part of the div as a number of them exist in the listbox and I am not 100% sure which one is correct. The one I have added it to above is the one that so far gives the fastest results with least weirdness.

Below are some links to people who have used it:

http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
http://weblog.west-wind.com/posts/2013/Jun/01/Smoothing-out-div-scrolling-in-Mobile-WebKit-Browsers
http://programming.mvergel.com/2013/09/solved-smooth-div-scrolling-in-ipad.html#.U7zkw9q9KK0

8

[quote=109618:@Nathan Wright]My JS and DOM knowledge is not great which is why I leave it to people like you to do web clever stuff :wink:
[/quote]

I meant something a little different by the comment. It’s hard to explain. Not technical at all. If I come up with a good explanation, I’ll share it.