Kendo mobile scroller works fine on Android, but not working on iOS

[Nima]

I have an AppBuilder (aka Icenium) app that uses Kendo Mobile, and I need to show a screen split horizontally. The top half shows an image (in div prodImage below), and the bottom half shows a scrollable list. My problem is that this list works on Chrome and Android devices, but it doesn't scroll at all on the iOS app.

Here's the full structure of my mobile view (screen):

<div id="products" data-role="view" data-stretch="true" data-layout="myLayout">
    <div class="splitView">
        <div class="topPane">
            <div id="prodImage"></div>
        </div>
        <div class="bottomPane" data-role="scroller" >
            <ul id="prodList" data-role="listview"></ul>
        </div>
    </div>
</div>

The divs prodImage and prodList are populated programatically. The prodImage div only gets an img tag, and prodList gets about 20-40 li elements.It's important to note the data-stretch="true" attribute in the main view. According to the docs, this attribute disables the scrolling in the main view, so that the image stays in the screen the whole time. The bottomPane scroller is the one broken on iOS only and is supposed to allow the list view to scroll.

Any ideas? Thanks.

[Kiril Nikolov]

Hello Nima,

I have tested your setup in a simple application, and it seems to be working on all devices (including iPhone running iOS7). You can test it here:

http://jsbin.com/zesoc/1/edit

My guess is that the reason for this problem is in the way you append items to the listview. Do you use the built-in append method or the jQuery append?

If this is not the case, please provide us with a runnable sample, where the issue is reproduced, so we can take a look.

Regards,
Kiril Nikolov
Telerik