IPad Safari не соответствует прокрутке в RTL с широким контентом

Условие выглядит следующим образом:

Использование iPad Safari
Страница находится в режиме RTL (справа налево) (арабский язык)
Страница динамически загружает контент, который шире экрана
Появляется странное поведение прокрутки

Страница запускается, по-видимому, прокручивается слишком далеко влево (см. скриншот), поэтому правая часть (как правило, левая в режиме 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>

Действия, которые вы можете выполнить, чтобы воспроизвести проблему:

Скопируйте этот HTML-код в локальный файл
Откройте документ в Chrome, используя F12, вы можете включить эмуляцию iPad.

Нажмите кнопку для эмуляции - тогда вы заметите, что правый край красной рамки находится около середины страницы. Однако этого не должно быть. Этот красный ящик должен быть единственным контентом, и ничто не находится справа от него, поэтому оно должно совпадать с правым краем.

Эта проблема также возникает, когда вы динамически вставляете широкий контент после загрузки страницы, поэтому, если страница начинается с широкого содержимого, поведение прокрутки кажется нормальным. Следовательно, setTimeout() в коде.

Любые советы/способы решения проблемы?

EDIT: Вы также можете попробовать эту ссылку, чтобы воспроизвести проблему: http://www.codefactor.net/ipadissue.html

Ответ 1

Это ошибка в WebKit и была разрешена https://bugs.webkit.org/show_bug.cgi?id=146872.

Смотрите журнал изменений здесь: https://bugs.webkit.org/attachment.cgi?id=256657&action=review

Однако я не знаю версию выпуска. Рассмотрим, что большинство iOS имеют обновления браузера с обновлением ОС, это будет исправлено в ближайшее время (исправлено как 2015-7-11).

Ответ 2

Единственное решение, которое я нашел до сих пор, заключается в размещении всего содержимого 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, а не с настольной версией.

Ответ 3

'Мне кажется, что проблема заключается в метатеге вашего просмотра.

Попробуйте следующее:

<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">

Ответ 4

Это связано с тем, что вы используете метод замены изображений, в котором используется text-indent с огромным отрицательным значением. Это не очень хорошо работает с RTL, браузер не понимает его, как мы относимся к нему в LTR. Убедитесь, что элемент имеет "переполнение: скрыто"; и это устранит проблему.