IOS 5 (safari) ошибка с событиями касания HTML в div "position: fixed" - PullRequest
Новая
       2

IOS 5 (safari) ошибка с событиями касания HTML в div "position: fixed"

11 голосов
/ 10 января 2012

У меня есть позиция: фиксированный 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

Ответы [ 7 ]

12 голосов
/ 24 мая 2012

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

Код: 

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

Благодарность за поиск этого метода идет на pamelafox в этом обсуждении ошибки github .

2 голосов
/ 12 февраля 2012

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

1 голос
/ 10 апреля 2012

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

1 голос
/ 03 марта 2012

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

<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

1 голос
/ 19 января 2012

У меня была эта проблема. То, как я обошел это, заключалось в том, чтобы связать «click» вместо «touchstart».

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

0 голосов
/ 24 января 2014

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

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

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

0 голосов
/ 31 июля 2012

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

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

...