Прокрутка одним пальцем в Safari не отображает HTML, пока прокрутка не закончится - PullRequest
Новая
       31

Прокрутка одним пальцем в Safari не отображает HTML, пока прокрутка не закончится

6 голосов
/ 28 ноября 2011

В мобильном веб-приложении у меня есть div, который можно прокручивать с помощью нового необычного -webkit-overflow-scrolling: touch. Единственная проблема заключается в том, что содержимое отображается только после завершения прокрутки. Есть ли способ заставить Mobile Safari (и, возможно, другие мобильные браузеры, например, в Android) отображать HTML во время прокрутки одним пальцем? 

.layer-content {
  position: absolute;
  top: 112px;
  bottom: 0;
  width: 100%;
  background: #e6e6e6;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;    
}

Ответы [ 4 ]

4 голосов
/ 16 июля 2012

Вы можете обойти это, используя аппаратное ускорение.Попробуйте добавить следующий CSS к элементам внутри .layer-content: 

-webkit-transform: translate3d(0,0,0);
2 голосов
/ 23 декабря 2011

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

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

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

Если позиция автоматическая (значение по умолчанию), Mobile Safari отобразит элемент при прокрутке.

0 голосов
/ 30 декабря 2015

Я чертовски уверен, что только что решил это с помощью: 

overflow-y: auto;

Добавьте это к вашему элементу прокрутки.

(Предположительно, просто overflow: auto; будет работать в зависимости от ваших потребностей.)

...