Динамический список, покрывающий страницу... но только в Chrome для Android

Question

У меня динамически создается <ul> список который находится на этой странице: http://www.roadtripradar.com/

(Для просмотра списка необходимо ввести маршрут, добавить некоторые параметры и нажать "Поиск"; созданный список находится под кнопкой "Все места" под картой)

Проблема в том, что <ul>после начала прокрутки охватывает все остальное на странице... но только в Chrome для Android.

Он отлично работает в IE, FF и Chrome на рабочем столе. Он отлично работает в Safari на iPhone.

Я пытался изменить z-valuesи это не имеет значения.

У меня есть CSS для списка:

#list {
        overflow: auto;
        border: 1px solid white;
        border-radius: 3px 3px 3px 3px;
        -moz-border-radius: 3px 3px 3px 3px;
        -webkit-border: 3px 3px 3px 3px;
    height: -moz-calc(100% - 100px);
    height: -webkit-calc(100% - 120px);
    height: calc(100% - 100px);
        width: 90wh;
        padding: 1px 1px 1px 1px;
        background-color: rgba(136, 169, 255, 0.5);
        display:block;
      }

Кто-нибудь может подумать, что может быть причиной этого странного поведения?

Буду признателен за дополнительный набор глаз, если вы можете посоветовать. Спасибо.

Answer 1

Итак, получается, что это известная ошибка в Chrome для Android (что-то связанное с 3D-рендерингом, которое мне в основном чуждо, но, к счастью, в мире есть другие люди, которые умнее меня!). В результате добавление -webkit-transform: translateZ(0); к #list полностью исправил проблему, как в:

#list {
        -webkit-transform: translateZ(0);
        overflow: auto;
        ...
        ...
      }

И это все - проблема решена!

Если кто-то может объяснить, почему это работает, не стесняйтесь комментировать.