2

JQM 1.3.1 - JQ 1.9.1 - Chrome on Android 4.1.1

I have a home page with a list of 50 items which point to another page.

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.

I removed all my css to make sure that none of them were interacting with the transition.

Here is the code (can be found here : http://test.wouf.it/slideandroid/) : 

<!DOCTYPE html>
<html>
<head>
<title>slide</title>
<meta charset='utf-8'/>
<meta name="viewport" content='user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'/>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script>
  $(document).one("mobileinit", function(event) {
  $.mobile.defaultPageTransition = "slide";
  });
</script>
 <script src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js'></script>
 </head>
 <body>
  <div data-role='page' id='page1' data-theme="c">
    <div data-role='header' data-position='fixed' data-theme="a">
      <h1>example</h1>
    </div>
    <div style='background-color:#ddd;' data-role="content">
      <ul style="width:100%;">
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      </ul>
    </div>
    <div data-role='footer' data-position='bottom' data-theme="a" data-tap-toggle="false">
      <div data-role='navbar' id='kms'  >
        <ul id="dist">
          <li><a href='#'>Loren</a></li>
          <li><a href='#'>Ipsum</a></li>
          <li><a href='#'>Dolor</a></li>
          <li><a href='#'>Sit</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div data-role="page" id="event" data-theme="c" style="background:black;">
    <div data-role="header" data-theme='a'>
      <a class="ui-btn-left ret" data-icon="arrow-l" id="bhome" href="#page1" data-direction="reverse" data-iconshadow="false" >Back</a>
      <h1></h1>
    </div>
    <div id='ecnt' data-role="content">
      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. 
    </div>
  </div>
  </body>
 </html>

If I look on firebug, the attributes of the events div change after the first call :

Before : 

<div id="container" class="ui-mobile-viewport ui-overlay-c">
<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">
<div id="event" style="background:black;" data-theme="c" data-role="page" data-url="event">
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">

After :

<div id="container" class="ui-mobile-viewport ui-overlay-c">
<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">
<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">
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">

Could it be a reason for the change ?

Alain Zelink
  • 889
  • 2
  • 15
  • 33
  • Check this answer http://stackoverflow.com/a/12749862/1771795 – Omar Jun 23 '13 at 19:00
  • Thank you but no, it doesn't change the slide on the second call. Neither does .ui-page { -webkit-backface-visibility: hidden; } from http://stackoverflow.com/questions/13319617/jquery-mobile-data-transition-slide-overlap – Alain Zelink Jun 24 '13 at 09:05
  • I hope you get it fixed soon. – Omar Jun 24 '13 at 09:13
  • I am checking this out on Beta and the Content_shell and I can't see any issue at all. – Kinlan Jun 24 '13 at 14:19
  • can you add some screen shots? I can't replicate the issue you are having – Kinlan Jun 25 '13 at 18:41
  • Here is a video of what I see. first slide takes the whole of the first screen to the left, second and further slides look more like an overlap. http://www.youtube.com/watch?v=eIWMuqZx3Jg – Alain Zelink Jun 26 '13 at 06:55
  • Related Ticket : https://github.com/jquery/jquery-mobile/issues/5764 I guess it will be fixed in 1.4, time will tell. – Taiko Dec 17 '13 at 08:54

1 Answers1

0

Courtesy of dantabel in this thread : https://github.com/jquery/jquery-mobile/issues/5764 Here's the answer ! Exchange this part of the jquery 1.3.2 source code 

// line 3674 - jquery.mobile-1.3.2.js
startOut = function() {
    // if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
    if ( !sequential ) {
        doneOut();
    }
    else {
        $from.animationComplete( doneOut );
    }

    // Set the from page's height and start it transitioning out
    // Note: setting an explicit height helps eliminate tiling in the transitions
    $from
        .height( screenHeight + $.mobile.window.scrollTop() )
        .addClass( name + " out" + reverseClass );
},

With this one :

startOut = function() {
    if ( !sequential && reverse) {
        doneOut();
    } else if(sequential) {
        $from.animationComplete( doneOut );
    }

    $from
        .height( screenHeight + $.mobile.window.scrollTop() )
        .addClass( name + " out" + reverseClass );

    if ( !sequential && !reverse) {
        doneOut();
    }
},

And then it works like a charm ! (at least on iOS 7)

I guess this bug will be fixed in 1.4, we'll see :-)

Taiko
  • 1,351
  • 1
  • 19
  • 35