Opened 8 years ago

Closed 6 years ago

#13996 closed defect (wontfix)

Disruptive interpage transition on Phongap app in iPad simulator

Reported by: Paul Christopher Owned by: Eric Durocher
Priority: high Milestone: tbd
Component: DojoX Mobile Version: 1.7.0b1
Keywords: Cc: Atsushi Ono
Blocked By: Blocking:

Description

Since iPad apps are normally much lager than simple smartphone apps such as Tweetview (http://dojotoolkit.org/documentation/tutorials/1.6/mobile/tweetview/getting_started/), I have split the code of my iPad app into several html files. This works fine except one cosmetic problem: When navigating form one page to another page, some kind of white screen is displayed during page change, i.e. the page clearly flickers, i.e. it is clearly visible to the user, that the pages have changed because a white page is shown inbetween the two pages.

Steps to reproduce:

  • Make a simple app containing 2 separate pages. Each page has a dojox.mobile.Heading and a back button to navigate between the pages.

<div data-dojo-type="dojox.mobile.View">

<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'Other page', href:'page2.html', transition:'none'">Page 1</h1>

</div>

  • Deploy the small app to the iPad simulator using Phonegap 1.0
  • Navigate between the pages (do it several times): Page transition will be in most cases a very disruptive experience to the user. The page flickers since a white page is shown inbetween the pages and/or the screen is clearly rebuild.

Add a transition type such as "fade". The result will deteriorate. The heading of the other page will be shown unstyled on the screen for a short moment.

Normally, when navigating between pages, there is no such flickering. Just take http://dojotoolkit.org, navigate between "Features", "Documentation", "Community" and oberseve the black header. No flickering will appear.

This is not a real bug report. It is only a kind of feedback to the developpers. Maybe I am trying to do something, dojox.mobile is not made for, and this issues just shows the limitations of splitting up an app into several pages. Maybe this issue also just shows the need for a working app controller such as dojox.app to make more complex apps since smooth interpage transition are always prone to a lot of problems, see e.g. http://bugs.dojotoolkit.org/ticket/13876.

Attachments (1)

www.zip (2.4 KB) - added by Paul Christopher 8 years ago.
Test case

Download all attachments as: .zip

Change History (8)

comment:1 Changed 8 years ago by ykami

Yes, there are flicker issues on iOS. We are aware of that. They are easily reproducible even without dojo. We recently added some workaround code to avoid these issues. Please see #13382 for details.

comment:2 Changed 8 years ago by Paul Christopher

Yes, but please be aware that this issue is about page transition between two seperate html pages. Ticket 13382 is about view transition between views of one and the same page.

Changed 8 years ago by Paul Christopher

Attachment: www.zip added

Test case

comment:3 Changed 8 years ago by Paul Christopher

Attached you can find a small test case which illustrates the above issue (see file ww.zip)

  • The files are meant for a Phonegap app which is run with the iPad simulator (Unfortunately I don't have a real iPad at hand)
  • The zip folder contain the www folder of the Phonegap app. You need to add dojo and phonegap-1.0.0.js to the js folder. I personally don't use a custom build for the app. The required modules are pulled in via XHR, but I have removed all unneeded files from the dojo folder so as to reduce the app size a little bit.
  • Run and deploy the app to the iPad simulator. Click through the pages. Do it serveral times. Sometimes the above issue only occurs when page transition is done twice or more.

Can you reproduce the issue?

comment:4 Changed 8 years ago by ykami

Cc: Atsushi Ono added

comment:5 Changed 7 years ago by ykami

Owner: changed from ykami to Eric Durocher
Status: newassigned

comment:6 Changed 6 years ago by Adrian Vasiliu

When using the "href" property, the specified page is loaded using window.open. I would think there isn't much that can be done to make the transition as smooth as a transition between views in the same document. Say, the hiding of the current view could be delayed instead of being done immediately, while using a wait cursor to preserve responsiveness, but this wouldn't make it as smooth as a view transition.

Instead, I would see 2 ways to go:

1/ Do not cut the app in several complete HTML apps, but in HTML fragments that you'd load using dojox/mobile/ContentPane, while still using regular view transitions. An example: dojox/mobile/tests/test_bk-content-view.html.

or

2/ As you say, go for dojox/app.

"The heading of the other page will be shown unstyled on the screen for a short moment."

This should go away by using style="visibility:hidden;" on the <body>, which is the recommended way for Dojo Mobile apps.

comment:7 Changed 6 years ago by Eric Durocher

Resolution: wontfix
Status: assignedclosed

Definitely seems like a limitation we can't do much about, so closing as "won't fix"...

Note: See TracTickets for help on using tickets.