iOS Safari RTL Offset с использованием -webkit-overflow-прокрутки: touch и -webkit-transform: translate3d (0,0,0)

Я работаю над сложным управлением, и мы обнаружили ошибку в RTL-режиме (только) в мобильном Safari. Теперь я разделил функциональность на базовые контейнеры div (похоже, jsfiddle не поддерживает RTL-режим).

RTL (проблема): http://markuskonrad.de/concepts/overflow/overflowissue-rtl.html

LTR (Regular – No Issue): http://markuskonrad.de/concepts/overflow/overflowissue-ltr.html

Протестированное устройство:

  • iPad 2 (iOS 8.2)
  • iPad Mini (iOS 8.3)
  • iPad Air (iOS 8.3)
  • iPhone 4 (iOS 7.1)

Возможно ли, что есть Safari Mobile Bug? Я только сталкиваюсь с этим вопросом.

Я знаю, что translate3d – это взлом для аппаратного ускорения, и мы не сталкиваемся с проблемой рендеринга вспомогательных элементов scrollContent-Div. Таким образом, единственная опция в настоящее время ждет поддержки свойства change-change . Любые другие идеи?

HTML-код

<html dir="rtl" lang="en-US"> <head> <link href="Styles/overflowissue.css" rel="stylesheet" /> </head> <body> <div id="scrollContainer" class="mySuiteUiScrollContainer"> <div id="scrollContent"> <p> 123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_ 123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_ </p> </div> </div> </body> </html> 

CSS-код

 .mySuiteUiScrollContainer { clear: both; display: block; height: 100%; overflow: auto; background-color:red; -webkit-overflow-scrolling: touch; } .mySuiteUiScrollContainer > * { clear: both; float: none; display: inline-block; overflow: hidden; background-color:blue; -webkit-transform: translate3d(0 ,0 ,0); } 

Пример iPad Air

Спасибо и BR, Маркус

  • WKWebView падает в ускоренном режимеAnimationDidStart
  • Прокрутка прокрутки IOS -webkit-overflow на неправильной оси или вообще не
  • Прокрутка iOS Safari вверх не работает на определенных страницах. Зачем?
  • iOS / WebKit: touchmove / touchstart не работает на входе & textarea
  • Как очистить историю в WKWebView?
  • Как изменить цвет выделения текста в WKWebView?
  • Рекомендуемая альтернатива webkit для серверных событий на iOS
  • WKWebView полноэкранный режим вместо кадра?
  • Каковы последствия использования неподдерживаемого свойства WebKit?
  • iPhone iOS не будет корректно отображать окно тени
  • Максимальный размер базы данных WebSQL / SQLite внутри UIWebView (телефонная задержка)
  • Interesting Posts

    Можно ли изменить высоту строк-заполнителей в UITableView без создания фиктивной строки?

    Ошибка ENOENT при попытке эмуляции приложения IOS iOS

    Заполнить просмотр кнопками в случайных положениях

    Безликая iOS: эквивалент объединения для поиска

    Удалите разрешение микрофона iOS7, чтобы протестировать разрешение

    iOS UITableView с динамическим текстом и изображениями, отображаемыми вместе (NSAttributedString + images)

    Аутентификация анонимно с использованием инфраструктуры XMPP в iOS

    Использование AVAudioRecorder прерывает звук на AVCaptureSession

    UITextField внутри ячейки UITableView

    Завершение приложения из-за неперехваченного исключения «NSRangeException», причина: «*** – : индекс 2 за пределами для пустых NSArray

    Не удалось добавить margin / padding в текст в UILabel – iOS Swift

    Как вы используете проверку ключевых значений?

    Как новый разработчик Objective-C, какие проблемы, связанные с памятью, я должен следить за использованием ARC?

    SQLite. Невозможно добавить более 1000 строк

    Xcode не может найти XMPPFramework – как вы исправляете ошибки компоновщика?

    Давайте будем гением компьютера.