title: iPad Safari improper scrolling in RTL with wide content
body: <p>The condition is as follows:</p>
  
  <ol>
  <li>Using iPad Safari</li>
  <li>Page is in RTL (right to left) mode (Arabic locale)</li>
  <li>Page dynamically loads some content which is wider than the screen</li>
  <li>Strange scrolling behavior occurs</li>
  </ol>
  
  <p>The page starts out seemingly scrolled too far to the left (see the screenshot), so the right-hand side (what is normally the left in LTR mode) is towards the middle and what seems like negative space is displayed instead.</p>
  
  <p>You can touch-drag to right to scroll left to see some contents that start off-screen, but I can only scroll part way, which leaves some content far off to the left that is impossible to get to.</p>
  
  <p>Here is a screenshot from defect I'm working on:</p>
  
  <p><img src="https://i.stack.imgur.com/5EyoE.png" alt="Screenshot of the initial state"></p>
  
  <p>Here is a simple HTML that could reproduce the problem:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html dir="rtl"&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="minimum-scale=0.25, maximum-scale=4.0, user-scalable=yes" /&gt;
  &lt;/head&gt;
  &lt;body style="background-color:grey"&gt;
  &lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      setTimeout(function(){
          $('&lt;div style="width:2000px;background-color:red"&gt;test&lt;/div&gt;').appendTo('body');
      },1000);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Steps you can follow to reproduce the problem:</p>
  
  <ol>
  <li>Copy this HTML to a local file</li>
  <li>Open the document in Chrome, using F12 you can turn on iPad emulation</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/ahmWd.png" alt="Chrome emulation"></p>
  
  <p>Press the button to emulate - then you will notice that the right edge of the red box is near the middle of the page. However, that should not be the case. That red box should be the only content, and nothing is to the right of it, so it should aligned with the right edge.</p>
  
  <p>This issue also only happens when you dynamically insert the wide content after the page has loaded, so if the page starts out with wide content, the scroll behavior seems normal. Hence the setTimeout() in the code.</p>
  
  <p>Any advice/workaround to fix this problem?</p>
  
  <p>EDIT:
  You can also directly try this link to reproduce the problem: <a href="http://www.codefactor.net/ipadissue.html" rel="nofollow noreferrer">http://www.codefactor.net/ipadissue.html</a></p>