iOS5 -webkit-overflow-прокрутка вызывает остановку работы сенсорных событий

при использовании [ webkit-overflow-scrolling: touch ;] область прокрутки работает хорошо, но это приводит к прекращению работы сенсорных событий из области прокрутки. Есть ли у кого-то такая же проблема? Кто может дать мне некоторые официальные ссылки об этой новой функции прокрутки?

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ios5 scroll</title> <style type="text/css"> header { background: red; width: 300px; height:44px; } .scroll { width: 300px; height:300px; background: yellow; overflow: scroll; -webkit-overflow-scrolling: touch; } </style> </head> <body> <div id="container"> <header> <button onclick="alert('header');">won't work?</button> </header> <div class="scroll"> <button onclick="alert('scroll');">It works</button> <div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div> <div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div> <div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div> </div> </div> </body> </html> 

2011-12-27: Я исправил эту проблему, но я до сих пор не удивляюсь реальной причине. В моем случае у меня есть несколько разделов на одной веб-странице, каждая секция имеет область прокрутки и заголовок, каждый раз отображается только один раздел и использует анимацию css3 в сочетании с преобразованием в разделы переключения. при добавлении [-webkit-overflow-scrolling] в области прокрутки всех разделов, события события перестают работать случайным образом, поэтому я просто добавляю [-webkit-overflow-scrolling] в раздел, который отображается в настоящее время, и удаляет его, когда раздел скрытый. Это хорошо работает, но я до сих пор не знаю, что вызывает эту проблему.

7 Solutions collect form web for “iOS5 -webkit-overflow-прокрутка вызывает остановку работы сенсорных событий”

У меня такая же проблема, и я могу ее повторять каждый раз. У меня есть страница, которая изменяет размеры элементов, чтобы они соответствовали экрану при изменении ориентации iPad. Если в какой-то момент элемент больше не нужно прокручивать, он перестанет делать это после этого, даже если элемент будет изменен до того места, где ему нужно прокрутить (например, для меня перелистывать назад). Так что это определенно ошибка, но у меня есть обходной путь:

При изменении размера элемента я перезапускаю -webkit-overflow-scrolling в auto , а затем снова настраиваю его. Тем не менее, вы должны ввести задержку между ними (50 мс работает нормально, не пытайтесь низок). Итак, что я сделал, был добавлен атрибут «прокручиваемый» элементам и использовал код ниже (используя jQuery):

 $("[scrollable]").css("-webkit-overflow-scrolling", "auto"); window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling", "touch") }, 100); 

Надеюсь это поможет!

Это вызвано наличием <iframe> на странице. Многие скрипты создают <iframes> для выполнения своей работы, включая социальные кнопки отслеживания (Facebook, Twitter, G +), отслеживание аналитики (Google и т. Д.) И библиотеки, такие как PhoneGap.

Не имеет значения, как будет отображаться <iframe> . display: none; visibility: hidden; width: 0; height: 0 display: none; visibility: hidden; width: 0; height: 0 не исправляет. Если <iframe> находится на странице, это произойдет, иногда с перерывами и иногда всегда.

Единственное решение, которое я нашел до сих пор (которое не очень хорошо работает в производственном приложении) заключается в удалении всех <iframes> на странице, создайте их только тогда, когда это необходимо (например, когда мне нужно позвонить PhoneGap API), а затем удалите их по завершении.

Я подтверждаю, что видел такую ​​же проблему в веб-приложении, используя экстенсивно сенсорные события и список свитков. До iOS5 я использовал iScroll, и все работало нормально; С iOS5 я использовал -webkit-overflow-прокрутку: коснитесь списков прокрутки, чтобы получить более быстрые свитки.

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

Перезагрузка приложения в состоянии «замороженного касания» не размораживает его: чтобы разморозить его, мне пришлось закрыть вкладку сафари, открыть новую и перезагрузить, пока я не встретил снова проблему при использовании приложения.

Проблема наблюдается на iPad2, iPhone 4, iPhone 3GS, на iOS 5.0

В конце концов, я деактивировал прокрутку сенсорного списка переполнения и вернулся в iScroll, и все работает хорошо, как в iOS4.

Вот несколько вариантов ответов, которые уже перечислены.

Моя особая проблема заключалась в том, что переориентация заставила прокрутку прекратить полностью работать, когда -webkit-overflow-scrolling: touch был применен к элементу.

Пример: Ландшафтная ориентация короче и нуждается в полосе прокрутки. Портрет достаточно высок, что нет полосы прокрутки. Переориентация на пейзаж; Полоса прокрутки присутствует, но не работает.

  • прослушать событие changechange

  • сделать что-то, что вызывает изменение макета элемента прокрутки

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

Затухание в и из работы или скрытие, а затем показ с небольшой задержкой (хотя он мигает). @ Решение Sari для изменения свойств прокрутки работает и не вызывает видимого перерисовки.

 $(window).on("orientationchange", function () { // use any valid jQuery selector var elements = $("[data-touchfix=true]"); elements.css("-webkit-overflow-scrolling", "auto"); window.setTimeout(function () { elements.css("-webkit-overflow-scrolling", "touch"); }, 100); }); 

Обратите внимание, что я не тестировал это исправление за пределами моего iPad 3, кроме как убедиться, что он не вызывает ошибок скрипта в Chrome или IE 7/8/9.

-webkit-overflow-scrolling + CSS3 Animations + Phonegap API calls = touch перестает отвечать.

Приложение для телефонных разговоров будет работать нормально, пока я не позвоню в API Phonegap, и в этот момент прикосновение перестанет отвечать на первый элемент, который имеет прикрепленное к нему событие в текущем представлении. Представление для моего приложения – body> div.current, а остальная часть divs не отображает.

Я могу повторять это каждый раз.

Это явно ошибка в iOS5.

В случае, если это будет полезно … Включая PhoneGap, я использовал Zepto для добавления загружаемого ajax-прокручиваемого содержимого в dom. Затем я применил к нему переход css. На странице не было iFrames.

У меня возникла такая же проблема, как упоминалось здесь, где прокрутка просто перестала работать. Когда я скопировал сгенерированный код в отдельный файл и попробовал это на симуляторе iOS – все работало, как ожидалось.

В итоге я получил его для работы, запросив высоту родительского контейнера – незадолго до перехода css. Добавляя var whatever = $('#container').height(); прокрутка работала.

Чтобы немного улучшить ThinkingStiff, вы можете избежать мигания – если переполнение: скрыто задано – если вместо значения «auto» просто удалить свойство:

 $('.scroll').css({'overflow':'hidden','-webkit-overflow-scrolling':''}); window.setTimeout(function () { $('.scroll').css({'overflow':'auto','-webkit-overflow-scrolling':'touch'})},50); 
  • Проведите анимацию в CSS3
  • `-webkit-overflow-scrolling: touch` сломан для первоначальных внеэкранных элементов в iOS7
  • Как настроить пользовательские заголовки HTTP на запросы, сделанные WKWebView
  • Webkit переполнения прокрутки Touch ошибка CSS на iPad
  • WebKit Audio искажается на iOS 6 (iPhone 5) впервые после включения питания
  • iOS Webkit игнорирует медиа-запросы
  • Safari: неправильный расчет видового экрана для размеров шрифта
  • Поддерживает ли webKit в iOS 11 (бета) поддержку WebRTC?
  • Тупик с GCD и webView
  • iOS / WebKit: touchmove / touchstart не работает на входе & textarea
  • HTML-разбивка на страницы
  • PhoneC: Разработка iOS проста с помощью XCode, Swift3, UITableView, cocatouch, давайте создадим приложения для iPhone, iPad и Macbook.