Databases
StackOverflow2013
Postsdbo
POoverlap in slide transition Jquery Mobile 1.3.1
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POoverlap in slide transition Jquery Mobile 1.3.1
    text
    copied!<p>JQM 1.3.1 - JQ 1.9.1 - Chrome on Android 4.1.1</p> <p>I have a home page with a list of 50 items which point to another page. </p> <p>When I use the slide transition, the first slide out and slide back are perfect. But the second one and all the ones after are a bit different. It looks more like an overlap when going from the list to the event's page. Also, the transition seems a bit faster. </p> <p>I removed all my css to make sure that none of them were interacting with the transition.</p> <p>Here is the code (can be found here : <a href="http://test.wouf.it/slideandroid/" rel="nofollow">http://test.wouf.it/slideandroid/</a>) : </p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;slide&lt;/title&gt; &lt;meta charset='utf-8'/&gt; &lt;meta name="viewport" content='user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1'&gt; &lt;link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'/&gt; &lt;script src='http://code.jquery.com/jquery-1.9.1.min.js'&gt;&lt;/script&gt; &lt;script&gt; $(document).one("mobileinit", function(event) { $.mobile.defaultPageTransition = "slide"; }); &lt;/script&gt; &lt;script src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js'&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div data-role='page' id='page1' data-theme="c"&gt; &lt;div data-role='header' data-position='fixed' data-theme="a"&gt; &lt;h1&gt;example&lt;/h1&gt; &lt;/div&gt; &lt;div style='background-color:#ddd;' data-role="content"&gt; &lt;ul style="width:100%;"&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#event"&gt;event page&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div data-role='footer' data-position='bottom' data-theme="a" data-tap-toggle="false"&gt; &lt;div data-role='navbar' id='kms' &gt; &lt;ul id="dist"&gt; &lt;li&gt;&lt;a href='#'&gt;Loren&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='#'&gt;Ipsum&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='#'&gt;Dolor&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='#'&gt;Sit&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-role="page" id="event" data-theme="c" style="background:black;"&gt; &lt;div data-role="header" data-theme='a'&gt; &lt;a class="ui-btn-left ret" data-icon="arrow-l" id="bhome" href="#page1" data-direction="reverse" data-iconshadow="false" &gt;Back&lt;/a&gt; &lt;h1&gt;&lt;/h1&gt; &lt;/div&gt; &lt;div id='ecnt' data-role="content"&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum trices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci c nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. s arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>If I look on firebug, the attributes of the events div change after the first call : </p> <p>Before : </p> <pre><code>&lt;div id="container" class="ui-mobile-viewport ui-overlay-c"&gt; &lt;div id="page1" class="ui-page ui-body-c ui-page-header-fixed iscroll-page ui-page-active" style="background: none repeat scroll 0% 0% black; padding-top: 44px; min-height: 618px;" data-theme="c" data-role="page" data-url="page1" tabindex="0"&gt; &lt;div id="event" style="background:black;" data-theme="c" data-role="page" data-url="event"&gt; &lt;div class="ui-loader ui-corner-all ui-body-a ui-loader-default"&gt; </code></pre> <p>After :</p> <pre><code>&lt;div id="container" class="ui-mobile-viewport ui-overlay-c"&gt; &lt;div id="page1" class="ui-page ui-body-c ui-page-header-fixed iscroll-page ui-page-active" style="background: none repeat scroll 0% 0% black; padding-top: 44px; min-height: 618px;" data-theme="c" data-role="page" data-url="page1" tabindex="0"&gt; &lt;div id="event" style="background: none repeat scroll 0% 0% black; min-height: 662px;" data-theme="c" data-role="page" data-url="event" tabindex="0" class="ui-page ui-body-c"&gt; &lt;div class="ui-loader ui-corner-all ui-body-a ui-loader-default"&gt; </code></pre> <p>Could it be a reason for the change ? </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload