Прокручування iPad Safari призводить до того, що елементи HTML зникають і з’являються знову із затримкою

Зараз я розробляю веб-додаток, використовуючи html5 та jQuery для iPad Safari. У мене виникає проблема, коли великі області прокрутки призводять до того, що елементи поза екраном з’являються після затримки, коли я прокручую їх донизу.

Що я маю на увазі під цим, якщо у мене є ряд зображень (або навіть div з градієнтом), які є поза екраном, коли я прокручую його вниз (або вгору), очікувана поведінка полягає в тому, що елемент з'явиться на екрані як Я прокручую це.

Однак я бачу, що елемент не з’являється, поки я не підніму палець з екрана і скроллер закінчить усі свої анімації.

Це спричиняє для мене надзвичайно помітну проблему, завдяки чому вся справа виглядає похмурою, хоча це не так. Я здогадуюсь, що iPad Safari намагається зробити щось для збереження пам’яті. Чи є спосіб, яким я можу запобігти тому, щоб ця невдача не відбулася. Крім того, я також вдячний, якщо хтось може пролити світло на те, що насправді намагається зробити iPad Safari.

Вам потрібно обдурити браузер, щоб ефективніше використовувати апаратне прискорення. Це можна зробити за допомогою порожнього 3d перетворення:

-webkit-transform: translate3d(0,0,0)

Зокрема, це знадобиться для дочірніх елементів, які мають position:relative;декларацію (або просто вийдіть і виконайте це для всіх дочірніх елементів).

Не гарантоване виправлення, але досить вдале більшість часу.

Підказка про капелюх: https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

Це повна відповідь на моє запитання. Я спочатку позначив відповідь @Colin Williams як правильну відповідь, оскільки це допомогло мені дійти до повного рішення. Член громади @Slipp Д. Томпсон відредагував моє запитання, після того, як близько 2,5 років мене вони задали, і сказав мені, що я зловживаю форматом запитань і відповідей SO. Він також сказав мені окремо розмістити це як відповідь. Ось ось повна відповідь, яка вирішила мою проблему:

@Colin Williams, дякую! Ваша відповідь та стаття, з якою ви зв’язалися, дали мені змогу спробувати щось із CSS.

Отже, я раніше використовував translate3d. Це дало небажані результати. В основному, він би відрізав і НЕ ВІДКЛЮЧИТИ елементи, які були поза екраном, поки я не взаємодіяв з ними. Так, в основному, в ландшафтній орієнтації половина мого веб-сайту, який був поза екраном, не відображався. Це веб-додаток iPad, завдяки якому я виправився.

Застосування translate3d до відносно розташованих елементів вирішило проблему для цих елементів, але інші елементи перестали відображатись, коли вони вийшли з екрана. Елементи, з якими я не міг взаємодіяти (твір мистецтва), ніколи не повторюватимуться, якщо я не перезавантажую сторінку.

Повне рішення:

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

Зараз, хоча це може бути не найефективнішим рішенням, це було єдине, що працює. Мобільний Safari не відображає елементи, які перебувають поза екраном, або іноді нерегулярно відображаються при використанні -webkit-overflow-scrolling: touch. Якщо translate3d не застосовується до всіх інших елементів, які можуть вийти за межі екрана внаслідок цього прокрутки, ці елементи будуть відрізані після прокрутки.

Тож ще раз дякую, і сподіваємось, це допоможе ще якійсь загубленій душі. Це, безумовно, допомогло мені великий час!

Націлювання на всі елементи, крім html: *:not(html) спричиняло проблеми в інших елементах у моєму випадку. Він модифікував контекст укладання, в результаті чого деякий z-індекс зламався.

Нам краще спробувати націлити на потрібний елемент і застосувати -webkit-transform: translate3d(0,0,0)лише до нього.

Редагувати: іноді translate3D(0,0,0)не працює, ми можемо використовувати наступний метод, орієнтуючись на потрібний елемент:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

Коли translate3d не працює, спробуйте додати перспективу. Це завжди працює для мене

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

Додавання -webkit-transform: translate3d(0,0,0)до елемента статично не працює для мене.

Я застосовую цю властивість динамічно. Наприклад, коли сторінка прокручується, я встановлюю -webkit-transform: translate3d(0,0,0)елемент. Потім після невеликої затримки я скинув цю властивість, тобто такий -webkit-transform: none підхід, здається, працює.

Дякую, @Colin Williams за те, що вказав на мене в правильному напрямку.

У мене була така ж проблема з iscroll 4.2.5 на ios7. Весь елемент прокрутки просто зникає. Я спробував додати, translate3d(0,0,0)як було запропоновано тут, це вирішило проблему, але це відключило ефект "iscroll" snap. Рішення було "position:relative; z-index:1000;display:block"надано властивості css всьому контейнеру, який містить елемент прокрутки, і немає необхідності надавати translate3d дочірнім елементам.

Час translate3dможе не спрацювати, у тих випадках perspectiveїх можна використовувати

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

Я досить проклятий, що я просто вирішив це:

overflow-y: auto;

(Імовірно, просто overflow: auto;буде працювати занадто залежно від ваших потреб.)

Є випадки , коли обертання застосовується і / або індекс Z використовується.

Поворот : Існуючого оголошення про -webkit-transformобертання елемента може бути недостатньо для вирішення проблеми зовнішності (як -webkit-transform: rotate(-45deg)). У цьому випадку ви можете використовувати -webkit-transform: translateZ(0px) rotateZ(-45deg)як трюк ( майте на увазі поворот Z ).

Z індекс : Разом з обертанням ви можете визначити позитивну z-indexвластивість, наприклад z-index: 42. Наведені вище кроки, описані в розділі "Поворот", у моєму випадку були достатньою для вирішення проблеми, навіть із порожнім translateZ(0px). Я підозрюю, що індекс Z в цьому випадку, можливо, спричинив зникнення та появу в першу чергу. У будь-якому випадку z-index: 42майно потрібно зберігати - -webkit-transform: translateZ(42px)тільки цього недостатньо.

Це дуже поширена проблема, з якою стикаються розробники, і це, головним чином, завдяки Safari'sвластивості не відтворювати елементів, визначених як position : fixed.

Отже, або змінити властивість позиції, або якийсь хак потрібно застосувати, як зазначено в інших відповідях.

Посилання1

Посилання2

У моєму випадку (програма для iOS Phonegap), застосування translate3d до відносних дочірніх елементів не вирішило проблему. Мій елемент, що прокручується, не мав заданої висоти, оскільки він був абсолютно розміщений, і я визначав верхню і нижню позиції. Що для мене виправлено - додавання мінімальної висоти (100 пікселів).

У мене була така ж проблема, використовуючи старішу версію Fancybox. Оновлення до v3 вирішить вашу проблему АБО ви можете просто додати:

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

Я зіткнувся з цією проблемою в проекті Framework7 & Cordova. Я спробував усі рішення вище. Вони не вирішили моєї проблеми.

У моєму випадку я використовував анімацію 10+ css на одній сторінці з нескінченним обертанням (перетворенням). Мені довелося видалити анімацію. Зараз це нормально з відсутністю деяких візуальних особливостей.

Якщо вищезгадані рішення не допоможуть вам, ви можете почати видаляти деякі анімації.

-webkit-transform: translate3d(0, 0, 0);трюк не працює для мене. У моєму випадку я поставив батькові:

// parent
height: 100vh;

Змінивши це на:

height: auto;
min-height: 100vh;

Вирішено питання, якщо хтось інший стикається з тією ж ситуацією.

У моєму випадку CSS не виправив проблему. Я помітив проблему під час використання кнопки jQuery повторно відображати кнопку.

$("#myButton").html("text")

Спробуйте це

$("#myButton").html("<span>text</span>")