Подтвердить что ты не робот

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] в раздел, который отображается в настоящее время, и удаляет его, когда раздел скрытый. Это работает хорошо, но я до сих пор не знаю, что вызывает эту проблему.

4b9b3361

Ответ 1

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Проблема видна на iPad2, iPhone 4, iPhone 3GS, все на iOS 5.0

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

Ответ 4

Здесь вариация на несколько из уже упомянутых ответов.

Моя особая проблема заключалась в том, что переориентация заставила прокрутку полностью прекратить работу, когда -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, кроме как убедиться, что он не вызывает ошибки script в Chrome или IE 7/8/9.

Ответ 5

-webkit-overflow-scrolling + CSS3 Анимации + Phonegap API-вызовы = сенсорные остановки реагируют.

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

Я могу реплицировать это каждый раз.

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

Ответ 6

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

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

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

Ответ 7

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

$('.scroll').css({'overflow':'hidden','-webkit-overflow-scrolling':''});
window.setTimeout(function () { $('.scroll').css({'overflow':'auto','-webkit-overflow-scrolling':'touch'})},50);