When I use "slide" back to the former page ,Chrome displays blank.

When I use "slide" back to the former page ,Chrome displays blank.

I am developing a mobile web app .To imitate the native app swipe effect,I used the "slide"  of transitions to change the page, but I have found when the program runs in Chrome ,  it will display blank after the page2 swipe to the page1 , this issue only appears in Chrome, and the other transition effects are  normal .

My code is following, and my English is poor, I don't know whether I express myself clearly. 

  1. <!doctype html>
  2. <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no">
  6.  <meta name="apple-mobile-web-app-capable" content="yes">
  7.  <title>demo</title>
  8.  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  9.  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  10.  <script >
  11. $(function(){
  12.         $("#slide1").on("click",
  13.         function() {
  14.                 $.mobile.changePage("#slide2", {
  15.                         transition: "slide",
  16.                 });
  17.         });
  18. $("#slide2").on("click",
  19.         function() {
  20.                 $.mobile.changePage("#slide1", {
  21.                         transition: "slide",
  22.                         reverse: true,
  23.                 });
  24.         });
  25.        });
  26.  </script>
  27.  </head>
  28. <body>

  29. <div  data-role="page" id="slide1" >SLIDE1 </div>
  30. <div data-role="page" id="slide2" > SLIDE2 </div>
  31. </body>
  32. </html>