Почему 3 композитных слоя для одного и того же прокручиваемого списка (Chrome)?

Question

Я получаю 3 разных слоя на вкладке Layers Chrome для одного и того же прокручиваемого списка. Это CSS элемента:

display: block;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
top: 45px;
position: absolute;
right: 0px;
left: 0px;
bottom: 0;
overflow: auto;
z-index: 100;
background: #ccc;
padding: 0 10px;

Для каждого слоя указаны причины компоновки :

• "Вторичный слой, вертикальный слой полосы прокрутки «
• » Вторичный слой для размещения содержимого, которое можно прокручивать »
• « Прокручиваемый элемент переполнения. Имеет клип, который должен быть известен композитору из-за составных потомков ».

Каждая из этих причин имеет смысл в качестве индивидуальных причин для продвижения узла в отдельный слой композитинга, но почему 3 слоя?

Я не могу найти ничего окончательного в Интернете. Ближайшее, что я нашел, - это , это и связанные страницы, но некоторые из них сломаны, а одна устарела и смело заявляет о предстоящих существенных изменениях. Любые идеи / направления будут очень приветствоваться, спасибо!

Обновление 1 : Вот живая демонстрация. list-grandparent и first-list - это узлы, которые показывают несколько уровней в моем устройстве. В идеале вы должны просматривать это с помощью Chrome вместо Android, вот где мне нужно исправить проблему.

html, body {
  overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
  min-height: 100vh;
}

.outermost-wrap {
  position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background: transparent;
    z-index: 0;
}

.double-viewport-width {
  overflow-x: auto;
    height: 100%;
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3D(0, 0, 0);
  width: 200vw;
}

.single-viewport-width {
  width: 100vw;
  position: absolute;
    top: 0;
    bottom: 0;
    overflow-y: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3D(0, 0, 0)
}

.single-viewport-width:nth-child(1) {
  left: 0;
}

.single-viewport-width:nth-child(2) {
  left: 50%;
}

.list-grandparent {
  backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    top: 45px;
  display: block;
  position: absolute;
    right: 0px;
    left: 0px;
    bottom: 0;
    top: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    z-index: 100;
    background: #ccc;
    padding: 0 10px;
}

.first-list {
  padding: 0 5px;
    background-color: #fff;
    position: relative;
  margin-bottom: 60px;
  list-style: none;
}

.list-item {
  padding: 8px 5px;
    margin: 0;
    position: relative;
    background: #fff;
    border-bottom: solid 2px #eee;
    font-size: 1.1em;
    line-height: 1.3em;
    color: #000000;
    min-height: 54px;
}

.clickable-item {
  text-decoration: none;
  background-color: transparent;
}

.avatar {
  background-image: url(https://placehold.it/100x100);
  background-color: #EEEEEE;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 2px;
    float: left;
    height: 2.3em;
    margin: 2px 2% 0 0;
    width: 2.3em;
    max-width: 18%;
}

.text {
  clear: both;
    float: none;
    word-wrap: break-word;
  display: block;
    color: #666;
}

.image {
  position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 10px -13px;
    clear: both;
  display: block;
    color: #666;
}

.image img {
  width: 100%;
}

.more-clickable-stuff {
  background: none;
  color: #222;
    display: inline-block;
    font-size: 0.95em;
    width: 83%;
    max-width: 100%;
    position: relative;
}

.clickable-text {
  max-width: 67%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    padding: 0;
    margin: 0 3px 0 0;
}

<div class="outermost-wrap">
  <div class="double-viewport-width">
    <div class="single-viewport-width">
      <div class="list-grandparent">
        <ul class="first-list">
          <li class="list-item">
            <a class="clickable-item">
              <div class="avatar"></div>
              <span class="text">Hello there</span>
              <span class="image">
                <img src="https://placehold.it/400x400/fff999" alt="placeholder" />
              </span>
            </a>
            <a class="more-clickable-stuff">
              <span class="clickable-text">I can be clicked</span>
            </a>
          </li>
          <li class="list-item">
            <a class="clickable-item">
              <div class="avatar"></div>
              <span class="text">Second Hello there</span>
              <span class="image">
                <img src="https://placehold.it/400x400/999fff" alt="placeholder" />
              </span>
            </a>
            <a class="more-clickable-stuff">
              <span class="clickable-text">I can be clicked too</span>
            </a>
          </li>
          <li class="list-item">
            <a class="clickable-item">
              <div class="avatar"></div>
              <span class="text">Third Hello there</span>
              <span class="image">
                <img src="https://placehold.it/400x400/99fff9" alt="placeholder" />
              </span>
            </a>
            <a class="more-clickable-stuff">
              <span class="clickable-text">I can be clicked three</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="single-viewport-width">
      <!-- there's other stuff here but I haven't included it -->
    </div>
  </div>
</div>