jquerymobile slide animation increases window width

StackOverflow https://stackoverflow.com/questions/17727965

  •  03-06-2022
  •  | 
  •  

Domanda

I am trying to accomplish a simple slide in popup animation in jquery mobile. I tested this on the desktop browser (chrome and firefox) and works fine. But in mobile i get the following results on pressing the button:
The popup comes in fine but creates a white space to the right of the screen which is visible if the user slides to the right. Dismissing the popup removes this white space. This only happens if the popup is triggered using "slide" transition. Does anyone know the reason for this behavior.

Popup after pressing button
white space due to slide transition

I can manually resize the window but I am not sure what event fires after the popup is done sliding in.

(I had images to show this but I don't have 10 rep so I cannot post them :( )

Does anyone know why this is happening. I am testing with Droid Razr Maxx (running Jelly Bean). I have tested with chrome, firefox and the default browser on the device. They all produce the same result. Here is my code:

<!DOCTYPE html>
 <html ng-app>
   <head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></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">
      <a href="#pop" data-role="button" data-rel="popup" data-transition="slide">Pop Up</a>
      <div data-role="popup" id="pop" data-overlay-theme="a">
       <p>Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup</p>
      </div>
     </div>
  </body>
</html>
È stato utile?

Soluzione

Upon further research, I found out that this issue was fixed in the latest version of jquery mobile (1.4) which is still in alpha phase.

http://jsbin.com/edeluh/32

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top