Проблема перекомпоновки Mobile Webkit

Я столкнулся с проблемой в мобильных версиях webkit (, а именно в Webkit 534.46 на iOS 5.1.1 в качестве мобильного Safari, а теперь и в Chrome для iOS ), которой не было ни в одном настольном браузере, который я видел.(т. е. приведенные ниже демонстрации следует просматривать в мобильной версии webkit.)

Вот живой пример проблемы. Ядро CSS предельно прямолинейно. Он размещает алфавитный указатель слева на странице :

#index {
    left:0; margin:0; padding:0; position:fixed; top:0; width:3em;
}

. Проблема возникает, когда элемент находится в фиксированном положении над верхней частью тела. С ним можно полностью взаимодействовать, пока прокрутка не изменится, а затем он перестанет принимать ввод. Если я (вручную )покачу прокрутку хотя бы на один пиксель, она снова станет активной. Пример был максимально простым и не использует JavaScript. После того, как я действительно забил его, я обнаружил, что кажется, что элемент думает, что он прокручивается, но был визуально исправлен. Другими словами, если вы нажмете «А», а затем попытаетесь снова нажать «А», иногда вы получите второй щелчок, но он будет дальше по списку.Мне это показалось проблемой перекомпоновки CSS. Я знаю, что мобильный вебкит пытается уменьшить количество перекомпоновок.

Вот живой пример обходного пути.

Я могу использовать JS, чтобы заставить CSS всего документа перекомпоновываться при прокрутке (с дросселем, который предотвращает это до 100 мс после прокрутки ), что, кажется, решает эту проблему в простом примере. К сожалению, это не помогает реальной версии этой проблемы.

Это код страницы проблемы и сценарий обхода.

Мой вопрос в том, что здесь происходит, и есть ли обходной путь CSS, который мне не хватает? В частности, мне любопытно, может ли какой-нибудь гуру CSS выяснить, в какой ситуации макет не позволяет кликам попасть в нужное место на фиксированном элементе? Лучшее понимание может помочь найти реальное решение.

Изменить:Я забыл упомянуть, что пример явно задает размер окна просмотра. Таким образом, пользователь не может увеличивать/уменьшать масштаб, а это означает, что фиксированная позиция :должна привязывать элемент к левой стороне окна.

Обновление (2012 -09 -20):Похоже, это исправлено в Mobile Safari на iOS 6 (, а также в UIWebView ). Любой обходной путь должен сначала убедиться, что он работает на iOS CssUserAgent это будет выглядеть так:

if (parseFloat(cssua.ua.ios) < 6) { /*... */ }