iOS5 -webkit-overflow-scrolling вызывает прекращение работы сенсорных событий - PullRequest
Новая
       12

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

14 голосов
/ 14 октября 2011

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

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

Ответы [ 7 ]

7 голосов
/ 29 марта 2012

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

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

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

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

4 голосов
/ 22 мая 2012

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

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

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

1 голос
/ 29 августа 2012

Вот вариант нескольких из перечисленных ответов.

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

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

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

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

  • убедитесь, что изменение является достаточно значительным, чтобы механизм рендеринга не оптимизировал его. Например, скрытие и немедленное отображение ничего не дает. Все, что использует 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.

1 голос
/ 06 ноября 2011

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

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

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

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

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

0 голосов
/ 24 марта 2014

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

$('.scroll').css({'overflow':'hidden','-webkit-overflow-scrolling':''});
window.setTimeout(function () { $('.scroll').css({'overflow':'auto','-webkit-overflow-scrolling':'touch'})},50);
0 голосов
/ 10 августа 2012

На случай, если это пригодится ... Включение PhoneGap Я использовал Zepto для добавления загружаемого с помощью Ajax прокручиваемого контента в DOM. Затем я применял к нему переход CSS. На странице не было iFrames.

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

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

0 голосов
/ 13 декабря 2011

-webkit-overflow-scrolling + анимация CSS3 + вызовы Phonegap API = сенсор перестает отвечать.

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...