Условие выглядит следующим образом:
Страница запускается, по-видимому, прокручивается слишком далеко влево (см. скриншот), поэтому правая часть (как правило, левая в режиме LTR) направлена к середине, и вместо этого отображается отрицательное пространство.
Вы можете перетащить вправо, чтобы прокрутить влево, чтобы увидеть какое-то содержимое, которое начинается за кадром, но я могу прокручивать только часть, которая оставляет некоторый контент вдалеке слева, что невозможно.
Вот скриншот из дефекта, над которым я работаю:
Вот простой HTML, который мог бы воспроизвести проблему:
<!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>
Действия, которые вы можете выполнить, чтобы воспроизвести проблему:
Нажмите кнопку для эмуляции - тогда вы заметите, что правый край красной рамки находится около середины страницы. Однако этого не должно быть. Этот красный ящик должен быть единственным контентом, и ничто не находится справа от него, поэтому оно должно совпадать с правым краем.
Эта проблема также возникает, когда вы динамически вставляете широкий контент после загрузки страницы, поэтому, если страница начинается с широкого содержимого, поведение прокрутки кажется нормальным. Следовательно, setTimeout() в коде.
Любые советы/способы решения проблемы?
EDIT: Вы также можете попробовать эту ссылку, чтобы воспроизвести проблему: http://www.codefactor.net/ipadissue.html
Это ошибка в WebKit и была разрешена https://bugs.webkit.org/show_bug.cgi?id=146872.
Смотрите журнал изменений здесь: https://bugs.webkit.org/attachment.cgi?id=256657&action=review
Однако я не знаю версию выпуска. Рассмотрим, что большинство iOS имеют обновления браузера с обновлением ОС, это будет исправлено в ближайшее время (исправлено как 2015-7-11).
Единственное решение, которое я нашел до сих пор, заключается в размещении всего содержимого rtl внутри контейнера. Это заставило образец кода работать так, как ожидалось, и сделать это для всего содержимого для детей.
(я тестировал iPad, хром, рабочий стол для сафари и несколько других имитируемых устройств в hrome dev-tools)
Так просто поместите все в него:
<!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>
ПРИМЕЧАНИЕ. Вам также может потребоваться удалить поля и/или paddings из #container div, заставив их значения 0s, чтобы не нарушать ваш дизайн специально если он построен поверх рамки CSS.
ПРИМЕЧАНИЕ 2. Я думаю, что это ошибка iPad Safari, о которой нам, возможно, потребуется сообщить.
Когда rtl тег html или body, текст выравнивается правильно, но divs выравниваются с неправильной стороной (например, если он находится внутри классической ltr веб-страницы) и это происходит только с iPad Safari, а не с настольной версией.
'Мне кажется, что проблема заключается в метатеге вашего просмотра.
Попробуйте следующее:
<meta name="viewport" content="width=device-width, initial-scale=1">
или просто расширьте существующий метатег следующим образом:
<meta name="viewport" content="minimum-scale=0.25, maximum-scale=4.0, user-scalable=yes, width=device-width, initial-scale=1">
Это связано с тем, что вы используете метод замены изображений, в котором используется text-indent с огромным отрицательным значением. Это не очень хорошо работает с RTL, браузер не понимает его, как мы относимся к нему в LTR. Убедитесь, что элемент имеет "переполнение: скрыто"; и это устранит проблему.