Относительно расположенные элементы в прокручиваемом абсолютно позиционированном div «отстают» от прокрутки

У меня есть приложение PhoneGap, которое отображает довольно длинный текст с заголовками, таблицами и изображениями, которые я тестирую на Android.

Все работает отлично, за исключением элементов со стилем position: relative Эти элементы «отстают» при прокрутке, то есть, если я прокручиваю страницу, то эти элементы начинают и заканчивают прокрутку примерно через четверть секунды позже.

Ошибка возникает при объединении абсолютного div с относительными дочерними элементами и дочернего с переполнением : auto . Удаление любой из этих вещей исправляет ошибку, но я бы предпочел оставить ее. Хотя я был бы готов удалить таблицу и показать ее отдельно (например, в диалоговом окне), если это необходимо.

Ошибка отображается только в стандартном Android-браузере (и, конечно же, в приложении PhoneGap). До сих пор я тестировал его со следующими устройствами:

      
  • Samsung Galaxy Nexus (4.1.1)
  •   
  • Samsung Galaxy S III (4.1.2)
  •   

Любая помощь приветствуется, но я бы предпочел решение, в котором HTML и функциональность не изменяются (или не слишком много).

after quick scrolling

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

<!DOCTYPE HTML>
<html>
<head><meta name="viewport" content="initial-scale=1.0"></head>
<body style="margin:0">

<div style="position:absolute;overflow:auto;top:100px;bottom:100px;width:100%">

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a quam arcu. Duis ultrices mollis nibh ut hendrerit. Etiam a interdum metus. Integer volutpat, nibh laoreet euismod suscipit, libero sem iaculis lorem, ut hendrerit magna orci eu elit. Nulla eu ultricies libero. Nulla facilisi. Maecenas nec turpis vitae magna lobortis ornare sit amet ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vestibulum lobortis orci, sit amet ornare dui congue nec. Morbi id magna at turpis auctor ultricies. Ut rhoncus quam augue, ut consectetur risus.

<div style="position:relative;background:red;">relative box
moves slower than the other text</div>
Fusce congue orci a nunc gravida sed pretium lorem convallis. Etiam hendrerit, ligula eget lobortis vestibulum, arcu sapien pharetra magna, auctor suscipit nisl tellus quis lacus. Cras id elit at ante mollis venenatis. Donec eu sollicitudin odio. Aliquam erat volutpat. Cras et tortor sed mi faucibus sagittis non quis metus. Morbi mauris ante, posuere vel rutrum id, mattis id enim. Morbi purus quam, euismod facilisis blandit quis, commodo at justo. Aliquam in fermentum nibh. Curabitur pharetra blandit risus sit amet tristique. Suspendisse potenti. Curabitur interdum eleifend justo, et dapibus justo volutpat sed.

<div style="overflow:auto"> <table> <tr><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th></tr> <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr> </table> </div> </div> </body> </html>
15
nl ja de
Есть ли шанс, что это исправлено путем принудительного ускорения аппаратного обеспечения? Я перестал использовать телефонный пробел, потому что у меня были проблемы с прокруткой, но я «исправил» их, добавив перевод translate3d со значением 0, которое обычно фиксирует вещи визуально. Это вам помогает?
добавлено автор Leeish, источник
спасибо, добавил ответ.
добавлено автор George Katsanos, источник
не могли бы вы предоставить jsfiddle или tinkerbin или liveweave
добавлено автор George Katsanos, источник
+ Leeish Спасибо за подсказку. Это решение, с которым я иду.
добавлено автор Thomas, источник
Я обновил сообщение по ссылке. К сожалению, эти службы не позволяют добавлять мета-заголовки.
добавлено автор Thomas, источник

4 ответы

Короче говоря, болезни, которые вы страдаете, распространены и документированы. Элементы с переполнением over: auto или overflow: scroll страдают от проблем с краской/reflow/render как в настольных, так и в мобильных браузерах. Чтобы усугубить это, в мобильных браузерах есть проблемы (webkit как на iOS, так и на Android), поскольку они не отображают относительные и абсолютные элементы, если они «вне экрана». Это может привести к задержке при прокрутке на экране.

Есть несколько «ручных» прокладок, которые вы можете применить:

element {
    -webkit-overflow-scrolling: touch;
}

element > * {
    -webkit-transform: translateZ(0px);
}

element > * {
    -webkit-transform: translate3d(0,0,0);
}

Некоторые читают для вас:

И фрагмент, который я скопировал откуда-то в свои заметки и теперь не могу найти источник:

Особенно на сайтах, которые сильно зависят от прокрутки, вы можете обнаружить   что ваш основной контент полагается на переполнение: прокрутка. Это настоящая   поскольку эта прокрутка не ускоряется, так как   содержимое перерисовывается всякий раз, когда ваш пользователь прокручивается. Вы можете работать   такие проблемы, используя обычную прокрутку страницы (переполнение: видимое) и   положение:. фиксированный </р>

29
добавлено
Большое спасибо!! Я создаю приложение с помощью Phonegap, а на устройствах Android - элементы со страницы списка, которые исчезают при прокрутке, и теперь они исправлены! iOS не вызывала у меня проблем с прокруткой. @MattyJ Я использую translateZ и отлично работает, не нужно отдыхать. :)
добавлено автор tbutcaru, источник
Информативный ответ спасибо Ник, это ваш ответ, предлагающий использовать один из этих хаков или их комбинацию?
добавлено автор Matty J, источник
Является ли ошибка где-то?
добавлено автор agaase, источник
@Thomas - У меня не было действительно тяжелого тестирования производительности на этих и, тем более, эмуляторах устройств (настольный парень здесь) ... но, заставляя ускорение GPU на элементах (что и делают эти последние два трюка), чтобы они визуализировать видимый экран и, таким образом, быть более удачным, это, конечно, компромисс. Я бы не использовал его в очень длинном списке, но опять же в длинном списке я бы порекомендовал бесконечную прокрутку, в которой вы повторно используете набор элементов. TLDR; - вы заставляете его визуализировать, а GPU ускоряет все эти элементы ... так что да, осторожно. Также CSS с * по своей сути ужасен.
добавлено автор Nick Sharp, источник
@Thomas - спасибо за то, что нашел цитату ... Адди - замечательный активист сети, и вы должны прочитать его книгу по шаблонам дизайна Javascript, если вы еще этого не сделали.
добавлено автор Nick Sharp, источник
Я также работал над Android-телефоном, и элементы все еще остаются. Я знаю, проблема в том, что у меня есть обновления изображений. Я получаю любое предложение
добавлено автор santhosh, источник
@ mivaas19 Нет, я этого не делал. Где он должен быть подан в любом случае? Это происходит только в браузере Android по умолчанию, а не в других браузерах WebKit.
добавлено автор Thomas, источник
Последние два фрагмента CSS работают. Мне так глупо, потому что я читал об этом раньше, но почему-то не понимал, что должен был обратиться к детям прокручивающего элемента: D Неважно, какой из них я использую в отношении производительности и поддержки? Целесообразно ли использовать его, даже если нет проблем? У меня есть опасения, что это замедлит рендеринг, особенно если есть много элементов.
добавлено автор Thomas, источник
Благодаря! BTW Цитата от addyosmani.com/ блог/& hellip;
добавлено автор Thomas, источник

Я думаю, у вас есть две проблемы, которые вы пытаетесь исправить. Текст, который проскальзывает ниже, и скорость задержки прокрутки?

Я не уверен, что вы пытаетесь сделать с символом авторского права, но у меня не было бы line-height меньше 1 или 1em код>. Попытайтесь использовать родительский элемент и отделите его. Вероятно, вы можете использовать display: inline-block; vertical-align: middle; на промежутке, чтобы получить желаемый эффект.


©Some text

For scrolling it depends on what you're doing. Mobile browsers wait 300ms for tags to see if you are scrolling or clicking a link. It could be related to that. If so, I'd checkout Google FastClick.

Мобильные браузеры ускоряют прокрутку страницы на теле. Таким образом, использование вложенных divs или position: absolute может помешать вам получить более быструю скорость прокрутки. В новых версиях Android и iOS вы можете использовать -webkit-overflow-scrolling: коснитесь, чтобы помочь, но это ничего не сделает для старых телефонов. Я бы постарался не использовать абсолютную позицию, потому что на основе вашего примера она не выглядит так, как требуется, а также с помощью вложенных div, которые прокрутки требуют от некоторых пользователей использовать два пальца внутри div для прокрутки содержимого. Я попытался бы избежать этого и заменить дизайн более мобильными конструктивными шаблонами, такими как ссылка, которая расширяет содержание.

A lot of the scrolling issues have came to light while trying to support position:fixed on mobile if think that might be causing it and you'd like to read about it: http://bradfrostweb.com/blog/mobile/fixed-position/

2
добавлено
не используйте положение абсолютное. если его только для мобильного стека - заголовок, контент div и нижний колонтитул друг на друга со 100% шириной.
добавлено автор Jesse, источник
Самый внешний div - это область содержимого моего приложения. Он абсолютно свободен, чтобы оставить пространство для верхнего и нижнего колонтитулов. Или есть лучший способ? Ошибка удаляется, когда я удаляю таблицу, поэтому горизонтальное переполнение кажется проблемой.
добавлено автор Thomas, источник
У меня просто проблема с некоторыми элементами (postion: relative), имеющими различную задержку прокрутки, поэтому при прокрутке она немного напоминает прокрутку паралакса. Трудно объяснить, поэтому я добавил скриншот. Для символов авторского права я скопировал некоторый CSS с нашего веб-сайта, где у нас возникла проблема с некоторыми браузерами, которые неправильно отображали супер- и индексы, когда в ячейке таблицы с вертикальным выравниванием: сверху.
добавлено автор Thomas, источник

Удалите position: absolute и position: relative , они абсолютно НЕ нужны для этого макета и вызывают все ваши проблемы.

Если хотите, вы можете добавить margin-top в свое тело.

PhoneGap produces some html garbage like that, I hope that you have a fine control of the CSS.

1
добавлено
Позиция: относительная и позиция: абсолютные, как известно, вызывают проблемы в мобильных браузерах - и поддержка может сильно различаться. Знаете ли вы, как проводить дистанционную проверку веб-разработки? Вот как вы можете играть со своим CSS и посмотреть, что работает или нет. Вот как это сделать: developers.google.com/chrome-developer-tools/docs/& hellip; Как только вы это настроите, вы король. Вы знаете, как использовать Dev Tools?
добавлено автор George Katsanos, источник
Фактически, помещенный абсолютный позиционный ящик помещается в ячейку RELATIVELY, поэтому попробуйте инвертировать позицию: абсолютный с позицией: относительный в этих двух div и посмотреть, что произойдет. Как известно, может быть, что относительная шкатулка не знает, как/куда поместить (или принимает тело ..)
добавлено автор George Katsanos, источник
Вы отправили ссылку только для Chrome, так как она является функцией инструментов Chrome . К сожалению, я пробовал вещи в течение нескольких часов без успеха ...
добавлено автор Thomas, источник
К сожалению, я не могу их удалить. Особенно, если внешний div - это диалог, который должен быть абсолютным. Да, я знаю, как использовать DevTools, но я никогда не делал этого удаленно. Метод в ссылке, которую вы предоставили, к сожалению, работает только для Chrome (где он работает нормально). Но я тестировал его внутри упакованного приложения с функцией отладки PhoneGap Build. Он использует weinre , о котором я буду смотреть.
добавлено автор Thomas, источник
Опубликованный код является лишь минимальным примером. Мне нужно абсолютное позиционирование, потому что мне нужны анимации, и мне также нужно показать содержимое в диалоговом окне. И мне нужно относительное позиционирование, чтобы позиционировать детей абсолютно. Короче, мне нужно, чтобы он дублировал некоторые элементы дизайна нашего сайта. А что вы думаете о том, что такое PhoneGap html мусор? Это все мой мусор: D
добавлено автор Thomas, источник

На самом деле для него есть простое исправление CSS, добавив в абзацы position: relative решение проблемы.

Попробуй это:

<!DOCTYPE HTML>
<html>
<head><meta name="viewport" content="initial-scale=1.0">
</head>
<body style="margin:0">

<div style="position:absolute;overflow:auto;top:100px;bottom:100px;width:100%">

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a quam arcu. Duis ultrices mollis nibh ut hendrerit. Etiam a interdum metus. Integer volutpat, nibh laoreet euismod suscipit, libero sem iaculis lorem, ut hendrerit magna orci eu elit. Nulla eu ultricies libero. Nulla facilisi. Maecenas nec turpis vitae magna lobortis ornare sit amet ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vestibulum lobortis orci, sit amet ornare dui congue nec. Morbi id magna at turpis auctor ultricies. Ut rhoncus quam augue, ut consectetur risus. <div style="position:relative;background:red;">relative box
moves slower than the other text</div>
Fusce congue orci a nunc gravida sed pretium lorem convallis. Etiam hendrerit, ligula eget lobortis vestibulum, arcu sapien pharetra magna, auctor suscipit nisl tellus quis lacus. Cras id elit at ante mollis venenatis. Donec eu sollicitudin odio. Aliquam erat volutpat. Cras et tortor sed mi faucibus sagittis non quis metus. Morbi mauris ante, posuere vel rutrum id, mattis id enim. Morbi purus quam, euismod facilisis blandit quis, commodo at justo. Aliquam in fermentum nibh. Curabitur pharetra blandit risus sit amet tristique. Suspendisse potenti. Curabitur interdum eleifend justo, et dapibus justo volutpat sed. <div style="overflow:auto"> <table> <tr><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th> <th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th> <th>test</th><th>test</th><th>test</th><th>test</th><th>test</th></tr> <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td> <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td> <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr> </table> </div> </div> </body> </html>
0
добавлено
Кажется, что это работает сначала, но таблица и некоторые другие элементы все еще остаются. Даже если я применил его к #topdiv> * , таблица все еще работает. Возможно, есть решение, но я пойду с решением преобразования
добавлено автор Thomas, источник
Mobile Dev Jobs — вакансии и аналитика
Mobile Dev Jobs — вакансии и аналитика
6 187 участник(ов)

Публикуем вакансии и запросы на поиск работы по направлению iOS, Android, Xamarin и т.д. ВАЖНО: Правила публикации и правила канала: Ссылка – https://telegra.ph/Pravila-oformleniya-vakansij-i-rezyume-11-09-2

Android Developers
Android Developers
4 476 участник(ов)

Общаемся на темы, посвященным Android-разработке, SDK, Kotlin, Realm и т.д.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

Android Architecture
Android Architecture
2 186 участник(ов)

Русскоязычный чат по архитектуре в андроид приложениях. Подробнее: http://telegra.ph/Android-Architecture-12-24

rus-speaking/android
rus-speaking/android
1 705 участник(ов)

Основной чат по Android разработке (вопрос-ответ). ПРАВИЛА: bit.ly/andr-rules. NEWS: bit.ly/AnrdResId ЧАТЫ: Основной: bit.ly/andr-main IDE, сборка, Git, сервисы: bit.ly/andr-tools Оффтоп: bit.ly/andr-offtop Конференции, события: bit.ly/andr-events Вакансии, найм: bit.ly/andr-job Архитектура: bit.ly/andr-patterns Rx: bit.ly/andr-rx Тестирование: bit.ly/andr-test Kotlin: bit.ly/andr-kotlin Хаmarin: bit.ly/andr-xamarin За мат, спам, агрессию, предложения о работе, оффтоп в этом канале - бан на сутки и более ☢☢☢

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Android Dev Подкаст
Android Dev Подкаст
1 325 участник(ов)

Комната для обсуждения Android Dev подкаста apptractor.ru/AndroidDev/ Общее обсуждение Android: https://t.me/android_ru Остальные чаты про Android: http://t.me/devChats Наши новости https://t.me/androiddevpodcast_news

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Android Guards
Android Guards
602 участник(ов)

Обсуждение любых вопросов касающихся безопасности Android. - Защита системы и приложений - Уязвимости и эксплойты - Вредоносное ПО - Копание в кишках системы и приложений (RE)

Android JOB
Android JOB
466 участник(ов)

Публикуем вакансии и запросы на поиск работы по направлению Android (full-time, part-time, remote и разовые подработки)

AndroidDev :: Разработка. It's Android time now!
AndroidDev :: Разработка. It's Android time now!
458 участник(ов)

It's Android time now! Чат разработчиков Android. Вакансии, резюме и информацию о митапах размещать можно. Публикацию скрытой и явной рекламы ваших каналов и сайтов после получения разрешения от @olegushakov

Aandroid Talks!
Aandroid Talks!
212 участник(ов)

Чат об общих вопросах по ОС Android. Чат для разработки под андроид - pro.android: https://t.me/joinchat/AAAAAEKIFKnmRT9cMebb9w

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

Android Rus
Android Rus
68 участник(ов)

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)