# Web listbox slow on iDevices

**URL:** <https://forum.xojo.com/t/web-listbox-slow-on-idevices/17817>\
**Category:** Web\
**Created:** [July 9, 2014, 1:39pm UTC](https://forum.xojo.com/t/web-listbox-slow-on-idevices/17817 "2014-07-09T13:39:56Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nathan\_Wright](https://forum.xojo.com/user_avatar/forum.xojo.com/nathan_wright/32/575_2.png) [@Nathan\_Wright](https://forum.xojo.com/u/Nathan_Wright)\
**Post date:** [July 9, 2014, 1:39pm UTC](https://forum.xojo.com/t/web-listbox-slow-on-idevices/17817/1 "2014-07-09T13:39:56Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![Norman\_P](https://forum.xojo.com/letter_avatar_proxy/v4/letter/n/858c86/32.png) [@Norman\_P](https://forum.xojo.com/u/Norman_P)\
**Post date:** [July 9, 2014, 2:16pm UTC](https://forum.xojo.com/t/web-listbox-slow-on-idevices/17817/2 "2014-07-09T14:16:00Z")

</div>

Paul has nothing to do with the web framework beyond documentation

---

<div class="post-metadata">

**Author:** ![Nathan\_Wright](https://forum.xojo.com/user_avatar/forum.xojo.com/nathan_wright/32/575_2.png) [@Nathan\_Wright](https://forum.xojo.com/u/Nathan_Wright)\
**Post date:** [July 9, 2014, 2:21pm UTC](https://forum.xojo.com/t/web-listbox-slow-on-idevices/17817/3 "2014-07-09T14:21:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Norman\_P](https://forum.xojo.com/letter_avatar_proxy/v4/letter/n/858c86/32.png) [@Norman\_P](https://forum.xojo.com/u/Norman_P)\
**Post date:** [July 9, 2014, 2:25pm UTC](https://forum.xojo.com/t/web-listbox-slow-on-idevices/17817/4 "2014-07-09T14:25:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Brad\_Hutchings](https://forum.xojo.com/user_avatar/forum.xojo.com/brad_hutchings/32/143_2.png) [@Brad\_Hutchings](https://forum.xojo.com/u/Brad_Hutchings)\
**Post date:** [July 9, 2014, 2:27pm UTC](https://forum.xojo.com/t/web-listbox-slow-on-idevices/17817/5 "2014-07-09T14:27:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Nathan\_Wright](https://forum.xojo.com/user_avatar/forum.xojo.com/nathan_wright/32/575_2.png) [@Nathan\_Wright](https://forum.xojo.com/u/Nathan_Wright)\
**Post date:** [July 9, 2014, 3:02pm UTC](https://forum.xojo.com/t/web-listbox-slow-on-idevices/17817/6 "2014-07-09T15:02:49Z")

</div>

> [@109596:@Brad Hutchings](#):
>
> It’s better form to do the CSS magic with JavaScript.

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

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.

---

<div class="post-metadata">

**Author:** ![Nathan\_Wright](https://forum.xojo.com/user_avatar/forum.xojo.com/nathan_wright/32/575_2.png) [@Nathan\_Wright](https://forum.xojo.com/u/Nathan_Wright)\
**Post date:** [July 9, 2014, 3:03pm UTC](https://forum.xojo.com/t/web-listbox-slow-on-idevices/17817/7 "2014-07-09T15:03:57Z")

</div>

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://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://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](http://programming.mvergel.com/2013/09/solved-smooth-div-scrolling-in-ipad.html#.U7zkw9q9KK0)

---

<div class="post-metadata">

**Author:** ![Brad\_Hutchings](https://forum.xojo.com/user_avatar/forum.xojo.com/brad_hutchings/32/143_2.png) [@Brad\_Hutchings](https://forum.xojo.com/u/Brad_Hutchings)\
**Post date:** [July 9, 2014, 3:09pm UTC](https://forum.xojo.com/t/web-listbox-slow-on-idevices/17817/8 "2014-07-09T15:09:39Z")

</div>

[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 😉  
[/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.

---

<div class="post-metadata">

**Author:** ![system](https://forum.xojo.com/uploads/default/original/1X/455b4dcc0e61630e9f81940004ddffa49c432a46.png) [@system](https://forum.xojo.com/u/system)\
**Post date:** [October 29, 2020, 5:19pm UTC](https://forum.xojo.com/t/web-listbox-slow-on-idevices/17817/9 "2020-10-29T17:19:09Z")

</div>


