The condition is as follows:
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.
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.
Here is a screenshot from defect I'm working on:
Here is a simple HTML that could reproduce the problem:
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta name="viewport" content="minimum-scale=0.25, maximum-scale=4.0, user-scalable=yes" />
</head>
<body style="background-color:grey">
<script src="http://code.jquery.com/jquery.js"></script>
<script>
setTimeout(function(){
$('<div style="width:2000px;background-color:red">test</div>').appendTo('body');
},1000);
</script>
</body>
</html>
Steps you can follow to reproduce the problem:
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.
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.
Any advice/workaround to fix this problem?
EDIT: You can also directly try this link to reproduce the problem: http://www.codefactor.net/ipadissue.html
This is a bug within WebKit and has been resolved by https://bugs.webkit.org/show_bug.cgi?id=146872.
See the change log here: https://bugs.webkit.org/attachment.cgi?id=256657&action=review
I don't know the release version though. Consider most iOS has browser updates with the OS update, this would patched soon (fixed as 2015-7-11).