Skip to content

Commit dec6365

Browse files
author
Jason Scott
committed
Added documentation for transtion flash workaround.
Documentation to workaround issue jquery-archive#4001
1 parent 70fe812 commit dec6365

2 files changed

Lines changed: 153 additions & 2 deletions

File tree

‎docs/pages/page-transitions-flash-workaround.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Docs - Transitions</title>
7+
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
8+
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
9+
10+
<script src="../../js/jquery.js"></script>
11+
<script src="../../docs/_assets/js/jqm-docs.js"></script>
12+
<script src="../../js/"></script>
13+
14+
<style type="text/css" media="screen">
15+
.ui-page { -webkit-backface-visibility: hidden; }
16+
</style>
17+
18+
</head>
19+
<body>
20+
21+
<div data-role="page" class="type-interior">
22+
23+
<div data-role="header" data-theme="f">
24+
<h1>Transitions</h1>
25+
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
26+
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
27+
</div><!-- /header -->
28+
29+
<div data-role="content">
30+
<div class="content-primary">
31+
<h2>Page transitions with workaround</h2>
32+
33+
<p>The jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation: </p>
34+
35+
<style>
36+
table { width:100%; border-bottom:1px solid #ccc; border-collapse: collapse; }
37+
th { text-align:left; }
38+
th h3 { margin:.6em 0; }
39+
th, td { vertical-align:top; border-top:1px solid #ccc; padding: 1px 3px; }
40+
td .ui-btn { margin:.4em 0 .5em 0; }
41+
td .ui-btn-inner { padding: .4em 15px; }
42+
</style>
43+
44+
<table margin="0">
45+
<tr>
46+
<th><h3>fade</h3></th>
47+
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
48+
<td><a href="page-transitions-page.html" data-role="button" data-transition="fade" data-inline="true">page</a></td>
49+
</tr>
50+
<tr>
51+
<th><h3>pop</h3></th>
52+
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
53+
<td><a href="page-transitions-page.html" data-role="button" data-transition="pop" data-inline="true">page</a></td>
54+
</tr>
55+
<tr>
56+
<th><h3>flip</h3></th>
57+
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
58+
<td><a href="page-transitions-page.html" data-role="button" data-transition="flip" data-inline="true">page</a></td>
59+
</tr>
60+
<tr>
61+
<th><h3>turn</h3></th>
62+
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
63+
<td><a href="page-transitions-page.html" data-role="button" data-transition="turn" data-inline="true">page</a></td>
64+
</tr>
65+
<tr>
66+
<th><h3>flow</h3></th>
67+
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
68+
<td><a href="page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
69+
</tr>
70+
<tr>
71+
<th><h3>slidefade</h3></th>
72+
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
73+
<td><a href="page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
74+
</tr>
75+
<tr>
76+
<th><h3>slide</h3></th>
77+
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
78+
<td><a href="page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td>
79+
</tr>
80+
<tr>
81+
<th><h3>slideup</h3></th>
82+
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
83+
<td><a href="page-transitions-page.html" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
84+
</tr>
85+
<tr>
86+
<th><h3>slidedown</h3></th>
87+
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
88+
<td><a href="page-transitions-page.html" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
89+
</tr>
90+
<tr>
91+
<th><h3>none</h3></th>
92+
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
93+
<td><a href="page-transitions-page.html" data-role="button" data-transition="none" data-inline="true">page</a></td>
94+
</tr>
95+
</table>
96+
97+
</div><!--/content-primary -->
98+
99+
<div class="content-secondary">
100+
101+
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
102+
103+
<h3>More in this section</h3>
104+
105+
<ul data-role="listview" data-theme="c" data-dividertheme="d">
106+
<li data-role="list-divider">Pages &amp; Dialogs</li>
107+
<li><a href="page-anatomy.html">Anatomy of a page</a></li>
108+
<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
109+
<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
110+
<li><a href="page-titles.html">Page titles</a></li>
111+
<li><a href="page-links.html">Linking pages</a></li>
112+
<li data-theme="a"><a href="page-transitions.html">Page transitions</a></li>
113+
<li><a href="loader.html">Page loading widget</a></li>
114+
<li><a href="page-dialogs.html">Dialogs</a></li>
115+
<li><a href="popup/index.html">Popups</a></li>
116+
<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
117+
<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
118+
<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
119+
<li><a href="page-scripting.html">Scripting pages</a></li>
120+
<li><a href="phonegap.html">PhoneGap apps</a></li>
121+
<li><a href="touchoverflow.html">touchOverflow feature</a></li>
122+
<li><a href="pages-themes.html">Theming pages</a></li>
123+
</ul>
124+
</div>
125+
</div>
126+
127+
</div><!-- /content -->
128+
129+
<div data-role="footer" class="footer-docs" data-theme="c">
130+
<p>&copy; 2011-12 The jQuery Foundation</p>
131+
</div>
132+
133+
</div><!-- /page -->
134+
135+
136+
</body>
137+
</html>

‎docs/pages/page-transitions.html‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,22 @@ <h2>Page transitions</h2>
8989
<td><a href="page-transitions-page.html" data-role="button" data-transition="none" data-inline="true">page</a></td>
9090
</tr>
9191
</table>
92-
93-
92+
<div class="ui-body ui-body-e">
93+
<p><strong>Important:</strong> Some platforms currently have issues with transitions.
94+
We are working on a solution to solve the problem for everyone.
95+
If you are experiencing flickers and flashes during or at the end of a transition we suggest the following workaround.
96+
Please note that this work around should be throughly tested on the target platform before deployment.
97+
This workaround is known to cause performance issues, and browser crashes on some platforms especially Android.
98+
Add the following code to your custom css.
99+
</p>
100+
<code>
101+
.ui-page { -webkit-backface-visibility: hidden; }
102+
</code>
103+
<p>
104+
<a rel="external" href="page-transitions-flash-workaround.html">This page</a> has the implemented workaround. <strong>Please test throughly.</strong>
105+
</p>
106+
107+
</div>
94108
<p><strong>Only seeing fade transitions?</strong> To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).</p>
95109

96110
<p><strong>Transitions were originally inspired by <a href="http://www.jqtouch.com/">jQtouch</a></strong> They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.</p>

0 commit comments

Comments
 (0)