Current Kendo + RequireJS = iOS 7 tabstrip bug

4 posts, 0 answers
  1. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 12 Mar 2014 Link to this post

    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 and 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:

        paths: {
            'jquery': "../kendo/js/jquery.min",
            'kendo': "../kendo/js/"
        shim: {
            'jquery': {
                exports: "jquery"
            'kendo': {
                deps: ["jquery"],
                exports: "kendo"
    // Expose the app module to the global scope so Kendo can access it.
    var app;
        function (
        ) {
            app = application;

    - change app.js to:

    define(["jquery", "kendo"], function ($, kendo) {
        var _kendoApplication;
        return {
            init: function () {
                _kendoApplication = new, { 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.
  2. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 12 Mar 2014 in reply to Roman Link to this post

    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).
  3. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 12 Mar 2014 Link to this post

    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.
  4. Kiril Nikolov
    Kiril Nikolov avatar
    2543 posts

    Posted 13 Mar 2014 Link to this post

    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.

    Kiril Nikolov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top