Cosmetic scrolling problem during view transitions (iOS)

4 posts, 0 answers
  1. S
    S avatar
    8 posts
    Member since:
    Jul 2011

    Posted 05 Jan 2013 Link to this post

    Hi - there is a cosmetic problem that the user can scroll the entire view (the layout?) while view transitions are happening. To see this happen -  I started with the very useful example from Todd here: and put it in an absolutely minimal PhoneGap/Cordova boilerplate project by removing all their default .js and .css  and replacing the bulk part of their index.html with the example above...

    The only real changes I made to the "stock" Cordova setup are to remove the width=device-width and height=device-height from the meta tags because it appears to break view/tabstrip heights :( I also put in the fix from Kamen found here: or else I lost a few millimeters of the screen. So far so good.

    Ok - so get that up and running. Then tap/click the one of the tab buttons and while the new screen is sliding in, tap/click again and drag up or down on the tab button you just clicked. The entire screen will scroll up or down. Looks really weird - doesn't break anything that I can tell :)

    I'm using Kendo version: kendoui.complete.2012.3.1114.commercial with PhoneGap/Cordova (v2.2.0) on iOS (6.0 if it matters) for both the simulator and the device itself.

    Here is my index.html just for completeness sake.

    <!DOCTYPE html>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="format-detection" content="telephone=no" />
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
            <link rel="stylesheet" href="styles/"/>
        body, html {
            <title>Hello World</title>
            <div id="tabletApp" style="display:none;">
                <div data-role="splitview">
                    <div data-role="pane" id="left" data-layout="leftLayout">
                        <div data-role="view">
                        <div data-role="layout" data-id="leftLayout">
                            <div data-role="header">
                                <div data-role="navbar">
                                    TEST APP
                    <div data-role="pane" id="right" data-layout="rightLayout">
                        <div data-role="view">
                        <div data-role="layout" data-id="rightLayout">
                            <div data-role="header">
                                <div data-role="navbar">
            <div id="phoneApp" style="display:none;">
                <div data-role="view">
                    <h1>Phone Home</h1>
                <div data-role="view" id="about">
                    <h1>Phone About</h1>
                <div data-role="layout" data-id="phoneDefault">
                    <div data-role="header">
                        <div data-role="navbar">
                            Phone App
                    <div data-role="footer">
                        <div data-role="tabstrip">
                            <a href="" data-icon="home">Home</a>
                            <a href="#about" data-icon="info">About</a>
            <script src="cordova-2.2.0.js"></script>
            <!-- This combo fixes the status bar height offset... Taken from Telerik forum answer post.  -->
                if (typeof window._nativeReady === "undefined")
                    window._nativeReady = true;
            <script src="js/jquery.min.js"></script>
            <script src="js/kendo.all.min.js"></script>
                $(function() {
                    var app,
                    //Must be mobile and tablet
                            isTablet = &&,
                            appElement = null,
                            appLayout = null;
                    console.log("mobileOS Info/isTablet",, isTablet);
                    appElement = (isTablet) ? $("#tabletApp") : $("#phoneApp");
                    appLayout = (isTablet) ? null : "phoneDefault";
                    app = new, {
                        layout: appLayout,
                        transition: 'slide'
                    //Adjust visibility of proper app container
  2. Petyo
    Petyo avatar
    2444 posts

    Posted 09 Jan 2013 Link to this post


    Thanks for contacting us. We are aware of this problem - unfortunately, we haven't discovered a way to mitigate it so far - the DOM elements behave strangely during transitions (so far, no way to cancel their DOM event handling).

    If this is a critical issue for your application, you may consider disabling the transition for the view in question.

    Kind regards,
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Missing user
    Missing user avatar

    Posted 05 Feb 2013 Link to this post

    I'm having the same problem. Are there still no solutions?
    Is there no way to prevent touch events while the transition is ongoing?

    Looking for a quick workaround.

  4. Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 06 Feb 2013 Link to this post

    Hi guys,

    I've just managed to fix the issue, please download the next internal build (later today) to get it. Let me know if it works for you.

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top