<!DOCTYPE html>
<html>
<head>
<style>
.list {
    height: 200px;
    position: relative;
    overflow: auto;
}

.will-change {
  will-change: transform;
  backface-visibility: hidden;
}

.flip-container, .front, .back {
    -webkit-perspective: 1000;
    width: 320px;
    height: 427px;
}

.front, .back {
    backface-visibility: hidden;

    transition: 0.0s;
    transform-style: preserve-3d;
    transform: rotateY(0deg);

    position: absolute;
    top: 0;
    left: 0;
}

.front {
    transform: rotateY(180deg);
}

.back {
    background: lightblue;
    opacity: 0.5;
}

</style>
</head>

<body>
<div class="flip-container">
  <div class="front">
    <div class="list will-change">
      <div style="height: 82px; left: 0px; position: absolute; top: 0px; width: 100%;"></div>
      <div style="height: 82px; left: 0px; position: absolute; top: 164px; width: 100%;"></div>        
    </div>
  </div>
  <div class="back">
  </div>
</div>
<p>This test verifies that "will-change" preserves the backface-visibility for
   scrollbar.</p>
</body>
</html>