Menu
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
434
The only solution i found so far is by placing all your rtl content inside a container div. That made the sample code working as expected and should do it for all child content too.
(i tested iPad, chrome, safari desktop, and few other simulated devices within chrome dev-tools)
So just put everything inside it :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="minimum-scale=0.25, maximum-scale=4.0, user-scalable=yes" />
</head>
<body style="background-color:grey">
<div dir="rtl" id="container"></div>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
setTimeout(function(){
$('<div style="width:2000px;background-color:red">test</div>').appendTo('#container');
},1000);
</script>
</body>
</html>
NOTE: You may also need to remove margins and/or paddings of the #container div by forcing them to 0s values in order to not break your design specially if is built on top of a CSS framework.
NOTE 2: I think this is an iPad's safari bug that we may need to report.
When rtl the html or body tag, text get aligned correctly but divs get aligned to the wrong side (like if it was inside a classic ltr web page) and it happens only with iPad's Safari, not the desktop version.
163
'Looks to me like the problem is your viewport meta tag.
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1">
or just extend your existing meta tag like this:
<meta name="viewport" content="minimum-scale=0.25, maximum-scale=4.0, user-scalable=yes, width=device-width, initial-scale=1">
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).
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
