This is a migrated thread and some comments may be shown as answers.

Cosmetic scrolling problem during view transitions (iOS)

3 Answers 129 Views
Application
This is a migrated thread and some comments may be shown as answers.
S
Top achievements
Rank 1
S asked on 05 Jan 2013, 06:27 AM
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: http://www.kendoui.com/forums/mobile/split-view/phone-vs-tablet.aspx#2192778 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: http://www.kendoui.com/forums/mobile/tabstrip/tabstrip-ios-disappearing.aspx#1972286 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.

Cheers,
Stephen
<!DOCTYPE html>
 
<html>
    <head>
        <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/kendo.mobile.all.min.css"/>
 
<style>
    body, html {
        margin:0;
        height:100%;
        width:100%;
    }
</style>
 
        <title>Hello World</title>
    </head>
    <body>
 
        <div id="tabletApp" style="display:none;">
            <div data-role="splitview">
                <div data-role="pane" id="left" data-layout="leftLayout">
                    <div data-role="view">
                        LEFT
                    </div>
 
                    <div data-role="layout" data-id="leftLayout">
                        <div data-role="header">
                            <div data-role="navbar">
                                TEST APP
                            </div>
                        </div>
                    </div>
                </div>
                <div data-role="pane" id="right" data-layout="rightLayout">
                    <div data-role="view">
                        RIGHT
                    </div>
 
                    <div data-role="layout" data-id="rightLayout">
                        <div data-role="header">
                            <div data-role="navbar">
                                  
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="phoneApp" style="display:none;">
            <div data-role="view">
                <h1>Phone Home</h1>
            </div>
            <div data-role="view" id="about">
                <h1>Phone About</h1>
            </div>
            <div data-role="layout" data-id="phoneDefault">
                <div data-role="header">
                    <div data-role="navbar">
                        Phone App
                    </div>
                </div>
                <!--Content-->
                <div data-role="footer">
                    <div data-role="tabstrip">
                        <a href="" data-icon="home">Home</a>
                        <a href="#about" data-icon="info">About</a>
                    </div>
                </div>
            </div>
        </div>
 
        <script src="cordova-2.2.0.js"></script>
        <!-- This combo fixes the status bar height offset... Taken from Telerik forum answer post.  -->
        <script>
            if (typeof window._nativeReady === "undefined")
                window._nativeReady = true;
        </script>
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
 
        <script>
            $(function() {
                var app,
                //Must be mobile and tablet
                        isTablet = kendo.support.mobileOS && kendo.support.mobileOS.tablet,
                        appElement = null,
                        appLayout = null;
 
                console.log("mobileOS Info/isTablet", kendo.support.mobileOS, isTablet);
 
                appElement = (isTablet) ? $("#tabletApp") : $("#phoneApp");
                appLayout = (isTablet) ? null : "phoneDefault";
 
                app = new kendo.mobile.Application(appElement, {
                    layout: appLayout,
                    transition: 'slide'
                });
 
                //Adjust visibility of proper app container
                appElement.show();
            });
        </script>
 
    </body>
</html>

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 09 Jan 2013, 08:28 AM
Hi,

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,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Missing User
answered on 05 Feb 2013, 04:25 PM
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.

cheers
0
Kamen Bundev
Telerik team
answered on 06 Feb 2013, 01:18 PM
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!
Tags
Application
Asked by
S
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Missing User
Kamen Bundev
Telerik team
Share this question
or