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

Cosmetic scrolling problem during view transitions (iOS)

3 Answers 134 Views

Application

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

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 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 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 data-role="footer">

<div data-role="tabstrip">

<a href="" data-icon="home">Home</a>

<a href="#about" data-icon="info">About</a>

</div>

<script src="cordova-2.2.0.js"></script>

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Cosmetic scrolling problem during view transitions (iOS)

3 Answers, 1 is accepted