Ошибка IOS 5 (сафари) с событиями HTML-касания на "позиции: исправлена" div

У меня есть позиция: фиксированный div на прокручивающейся веб-странице.

Вначале событие работает, но когда прокрутка страницы, в то время как фиды-фиды сохраняются на месте, его "сенсорная" зона, похоже, изменяется (кажется, она прокручивается - кроме верхней части другого div или в зависимости от макета страницы...). В конце концов никакое событие касания не будет получено больше, если вы пролистаете слишком много. Иногда базовый div принимает событие вместо этого.

Здесь образец:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes" />

<style>
#fixed {
  position: fixed;
  width:200px;
  height:200px;
  z-index:1;
  background: rgba(100,0,0,0.5);
}

#scrolling {
  display: block;
  position: absolute;
  top: 100px;
  left: 100px;
  width:200px;
  height:999px;
  background: rgba(0,100,0,1);
}
</style>
</head>

<body>
  <div id="fixed"     ontouchend="alert('touch fixed')"></div>
  <div id="scrolling" ontouchend="alert('touch scrolling')"></div>
</body>

Когда вы достаточно пролистаете прокрутку и коснитесь красного "фиксированного" div на левой стороне, ничего не произойдет (без предупреждения). Однако, с правой стороны (над зеленым прокруткой div) это работает...?!

Похож на ошибку Safari. Вы испытываете то же самое? Любая идея обходного пути? (Iscroll не может быть и речи - слишком медленно)

Спасибо, LC

Ответ 1

Я нашел относительно странное решение этой ошибки. Добавляя прослушиватель событий touchstart и пустой обработчик событий, он каким-то образом перемещает сенсорную область при ручном касании. Я не знаю, является ли это решением проблемы с прокруткой JavaScript.

Код:

document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});

Кредит на поиск этого метода переходит к pamelafox в об этом обсуждении с ошибкой github.

Ответ 2

У меня такая же проблема. Кажется, это проблема z-index, когда divs перемещаются программно (с анимацией и т.д.): Деление в фиксированной позиции не работает должным образом, так как пользователь не трогает снова для прокрутки. Только в этом последнем случае divs, кажется, пересчитаны правильно.

Ответ 3

У меня была эта проблема. То, как я обернулся, было привязать к "click" вместо "touchstart".

Это означало, что мои события "click" были перепутаны (для пользователей, не подключенных к сенсорным устройствам), поэтому я сначала обнаружил зависание, а затем использовал зависание, чтобы сказать мне, были ли они касательно пользователей или нет. Немного грязный, но он работает!

Ответ 4

Я тоже нашел эту ошибку, но внизу, казалось, прояснилось это для меня:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">`

добавьте его в свой html-заголовок

Ответ 5

Я столкнулся с той же проблемой, используя навигацию с фиксированной позицией, которая прокручивает пользователя вокруг страницы с помощью анимации jQuery. Я не считаю это проблемой z-index. Я обнаружил, что когда анимация перемещает область просмотра, элемент фиксированной позиции на самом деле все еще находится в предыдущем местоположении, пока пользователь не коснется и не переместит экран. В этот момент положение навигатора обновляется. Дополнительная информация и демонстрация здесь: http://bit.ly/ios5fixedBug

Ответ 6

Этот вопрос может быть связан с другим, у которого есть пара обходных решений. Исправленная реализация позиционирования на мобильном сафари в лучшем случае несерьезна.

Фиксированная позиция navbar, доступная только один раз в Mobile Safari на iOS5

Ответ 7

Прикоснитесь к событиям извлечения pageX и pageY, что означает, что позиция на странице "имеет значение". Если страница прокручивается вниз, координата Y увеличивается, и поэтому фиксированные элементы будут недоступны, поскольку их значения смещения y остаются неизменными. Вы можете проверить, что фиксированный элемент был затронут на прокрученной странице этим расчетом:

var finger = e.touches[0];
var yCalc = finger.pageY - window.pageYOffset;
var touchedElement = document.elementFromPoint(finger.pageX, yCalc);

Если у вас есть горизонтальная прокрутка, вы должны сделать то же самое с координатой x, конечно.