<html>

    <head>

      <base href="https://bugs.webkit.org/" />

    </head>

    <body><table border="1" cellspacing="0" cellpadding="8">

        <tr>

          <th>Bug ID</th>

          <td><a class="bz_bug_link 

          bz_status_NEW "

   title="NEW - Jquery Mobile Page Transition Error"

   href="https://bugs.webkit.org/show_bug.cgi?id=154672">154672</a>

          </td>

        </tr>

        <tr>

          <th>Summary</th>

          <td>Jquery Mobile Page Transition Error

          </td>

        </tr>

        <tr>

          <th>Classification</th>

          <td>Unclassified

          </td>

        </tr>

        <tr>

          <th>Product</th>

          <td>WebKit

          </td>

        </tr>

        <tr>

          <th>Version</th>

          <td>Safari 9

          </td>

        </tr>

        <tr>

          <th>Hardware</th>

          <td>iOS

          </td>

        </tr>

        <tr>

          <th>OS</th>

          <td>iOS 9.2

          </td>

        </tr>

        <tr>

          <th>Status</th>

          <td>NEW

          </td>

        </tr>

        <tr>

          <th>Severity</th>

          <td>Normal

          </td>

        </tr>

        <tr>

          <th>Priority</th>

          <td>P2

          </td>

        </tr>

        <tr>

          <th>Component</th>

          <td>WebCore JavaScript

          </td>

        </tr>

        <tr>

          <th>Assignee</th>

          <td>webkit-unassigned&#64;lists.webkit.org

          </td>

        </tr>

        <tr>

          <th>Reporter</th>

          <td>hikarusai_wa&#64;yahoo.com.hk

          </td>

        </tr></table>

      <p>

        <div>

        <pre>In my case, my code is quoted with form tag.

Page Transition animation is well in iOS7.

Even in android webview.

But it is bad in iOS9 .

Page2 will be zoomed out for a second after page1 hide.

&lt;form&gt;

&lt;div data-role=&quot;page&quot; id=&quot;pageone&quot;&gt;

  &lt;div data-role=&quot;header&quot;&gt;

    &lt;h1&gt;Welcome To My Homepage&lt;/h1&gt;

  &lt;/div&gt;

  &lt;div data-role=&quot;main&quot; class=&quot;ui-content&quot;&gt;

    &lt;p&gt;Click on the link to see the slide effect.&lt;/p&gt;

    &lt;a href=&quot;#pagetwo&quot; data-transition=&quot;slide&quot;&gt;Slide to Page Two&lt;/a&gt;

  &lt;/div&gt;

  &lt;div data-role=&quot;footer&quot;&gt;

    &lt;h1&gt;Footer Text&lt;/h1&gt;

  &lt;/div&gt;

&lt;/div&gt; 

&lt;div data-role=&quot;page&quot; id=&quot;pagetwo&quot;&gt;

  &lt;div data-role=&quot;header&quot;&gt;

    &lt;h1&gt;Welcome To My Homepage&lt;/h1&gt;

  &lt;/div&gt;

  &lt;div data-role=&quot;main&quot; class=&quot;ui-content&quot;&gt;

    &lt;p&gt;Click on the link to go back. &lt;b&gt;Note&lt;/b&gt;: fade is default.&lt;/p&gt;

    &lt;a href=&quot;#pageone&quot;&gt;Go to Page One&lt;/a&gt;

  &lt;/div&gt;

  &lt;div data-role=&quot;footer&quot;&gt;

    &lt;h1&gt;Footer Text&lt;/h1&gt;

  &lt;/div&gt;

&lt;/div&gt; 

&lt;/form&gt;</pre>

        </div>

      </p>

      <hr>

      <span>You are receiving this mail because:</span>

      <ul>

          <li>You are the assignee for the bug.</li>

      </ul>

    </body>

</html>