Current Kendo + RequireJS = iOS 7 tabstrip bug

[Roman]

Current Kendo releases produce a display bug in iOS 7 when used together with RequireJS.

We have been searching for the root of this problem for quite some time now and found the following source after a lot of testing:


Affected Kendo UI versions we tested:

2013.3.1324 and 2013.3.1511

Version 2013.2.1021, which is still the default in the Telerik AppBuilder, is NOT affected. With this version, everything works fine (even with current RequireJS versions).


Affected RequireJS versions we tested:

2.1.8 and 2.1.11


As far as we tested, this affects iOS 7 only.


To reproduce this, take these steps from the default AppBuilder Kendo UI Mobile project:

- update kendo.mobile.min.js and kendo.mobile.all.min.css to the desired version

- change the JS includes in the header in index.html to:

<script src="cordova.js"></script>
<script data-main="scripts/main" src="scripts/require.js"></script>

- strip all views from index.html except "tabstrip-home" (keep the layout)

- add main.js to scripts-folder:

require.config({
    paths: {
        'jquery': "../kendo/js/jquery.min",
        'kendo': "../kendo/js/kendo.mobile.min"
    },
    shim: {
        'jquery': {
            exports: "jquery"
        },
        'kendo': {
            deps: ["jquery"],
            exports: "kendo"
        }
    }
});

// Expose the app module to the global scope so Kendo can access it.
var app;

require(
    [
         "app"
    ],
    function (
         application
    ) {

        app = application;
        app.init();
    }
);

- change app.js to:

define(["jquery", "kendo"], function ($, kendo) {
    var _kendoApplication;

    return {
        init: function () {
            _kendoApplication = new kendo.mobile.Application(document.body, { layout: "tabstrip-layout"});
        }
    }
});

Thats it. Most basic version of the Test-Project with RequireJS.
As soon as you remove RequireJS, everything work fine again with iOS 7.

[Roman]

I forgot to describe the actual problem:

The tabstrip at the bottom is partially hidden and scrolls up and down together with the view. It is reproducable in the AppBuilder simulator (iPhone and iPad with iOS 7) as well as on iOS 7 devices (tested with iPad Air).

[Roman]

I just noticed that I posted it in the Keno UI Complete Forum, but it belongs to Kendo UI Mobile. Please move the thread if you like.

[Kiril Nikolov]

Hello Roman,

The problem most probably comes from the fact that you have a JavaScript error on your page, that causes the behavior that you observer. Most probably the invalid links in the TabStrip. I have attached a slightly modified example of the default AppBuilder application using RequireJS, where the issue is not reproducible. However if you click on the last item in the TabStrip and JavaScript error will be thrown the view will start bouncing on scroll.

Regards,
Kiril Nikolov
Telerik