IOS ошибка фликкера при переполнении css: прокрутка изменяется на переполнение: скрыто

Ответ 1

Ошибка фликкера связана с памятью графического процессора смартфона. Память ограничена (VRAM), и если элементы слишком сложны или больше, чем память, она будет исчерпана. В андроиде с CyanogenMod rom вы можете просматривать обработку gpu с помощью цветов на экране. От зеленого (низкого использования) до красного (более высокое использование gpu). Демо-изображение. Но я не знаю, существует ли аналогичный инструмент для IOS.

Это видно во всех переходах приложения или при использовании графического процессора.

В любом случае вы можете попробовать удалить/уменьшить сложность своих элементов, или это от здесь:

Вариант 1

<meta name="viewport" content="width=device-width, user-scalable=no" />

Вариант 2 this:

.ui-page {
    -webkit-backface-visibility: hidden;
}

Вариант 3 this:

.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"],
.ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active {
      overflow: hidden;
      -webkit-backface-visibility: hidden;
}

.ui-header {
    position:fixed;
    z-index:10;
    top:0;
    width:100%;
    padding: 13px 0;
    height: 15px;
}

.ui-content {
    padding-top: 57px;
    padding-bottom: 54px;
    overflow: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.ui-footer {
    position:fixed;
    z-index:10;
   bottom:0;
   width:100%;
}

Или просто удалите переходы (если проблема в переходе):

Вариант 4

'-webkit-transition': 'none !important',
'-moz-transition': 'none !important',
'-o-transition': 'none !important',
'-ms-transition': 'none !important',
'transition': 'none !important'

Ответ 2

Изменение значения переполнения, по-видимому, приводит к изменению значения переменной -webkit-overflow-scrolling от касания до авто, что вызывает мерцание.

Вы можете найти некоторую информацию в этой статье: http://slytrunk.tumblr.com/post/33861403641/ios6-web-app-flickering-with. Проблема остается в iOS7, но только для того, что я видел, когда вы переключаетесь с сенсорного на автоматический (не больше от автоматического до касания).

Ничего из -webkit-backface-visibility: hidden, -webkit-transform: translate3d (0,0,0) и т.д. работало в моем случае.

Как было предложено в предыдущей статье, одним из способов решения проблемы может быть использование -webkit-overflow-scrolling: auto, за счет приятного пользовательского опыта, который он предоставляет.

Другим было бы заблокировать прокрутку с помощью javascript, если ваш сайт может себе это позволить:

function disableScroll () {
  $(element).on('touchmove', function(event){ 
    event.preventDefault(); 
  });
},

function enableScroll () {
  $(element).off('touchmove');
}

Ответ 3

Решение с использованием -webkit-backface-visibility: hidden;, которое работает, похоже, вызывает проблемы с производительностью, если на странице имеется несколько скроллеров. Safari на более старых ipads поражал пределы ЦП и сбой браузера.

Я нашел решение, которое работает для моего SPA (которое может содержать до 100 слайдеров в списке), добавляя и удаляя класс с нарушающим стилем на странице show и скрывая события.

.touchslide {
    -webkit-overflow-scrolling:touch;
}

(Используя псевдокод стиля jQuery), когда вы покидаете страницу, удалите класс

selector.removeClass("touchslide");

Затем при загрузке страницы:

   selector.addClass("touchslide");
   selector.scrollLeft(0);

Вам нужно запустить событие прокрутки на iOS, поэтому нацеливайте объект html и добавьте в scrollLeft, поскольку первый свиток не будет иметь эффект инерции.