缓慢渲染移动铬水平和垂直滚动div

Question

我正在为我的一个项目构建一个类似看板的板，但我有时会在移动Chrome上进行渲染。有垂直面板div可以水平滚动，里面有类似卡片的条目。问题是卡片条目有时会消失，或者在面板垂直滚动之前不会呈现。

重现有点困难，因为它似乎是某种移动渲染优化。任何想法如何逃脱它？

我在手机上测试了它。

以下是桌面版Chrome Dev工具的视频：https://drive.google.com/file/d/0B9THsHAnqS7fZUJXZk9qTHZBN3c/view

似乎水平和垂直滚动都不能很好地结合在一起，我现在试图解决它两天了。

$(function () {
  $(window).resize(function () {
    $('.panel').height($(window).height() - $('.panel').offset().top - 20);
  });
  $(window).resize();
});

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 40px auto;
  line-height: 1.6;
  font-size: 14px;
  color: #444;
  padding: 0 10px
}

.panel {
    vertical-align: top;
    overflow-y: scroll;
    display: inline-block;
    width: 30%;
    min-width: 300px;
    max-width: 600px;
    border: solid 1px #bbb;
    border-radius: 2px;
    background-color: #ccc;
    margin: 10px;
}

.panel-content {
    padding: 10px;
}

.panel-title {
    font-size: 18px;
    background-color: #eee;
    padding: 10px;
}

.panel-title p {
    margin: 0;
}

.horizontal-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    margin: 0 auto;
}

.cardc .cardc-content {
    padding: 10px;
    max-height: 100%;
    overflow: hidden;
    border-radius: 2px;
}

.cardc {
    position: relative;
    margin: 5px 0 10px 0;
    background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="horizontal-scroll">
    <div class="panel">
        <div class="panel-title">
            <p>To do</p>
        </div>
        <div class="panel-content">
            <div class="cardc small">
                <div class="cardc-content">
                  <h4>Hello world</h4>
                  <p>something something</p>
                  <p>something something</p>
                  <p>something something</p>
                </div>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="panel-title">
            <p>Now</p>
        </div>
        <div class="panel-content">
            <div class="cardc small">
              <div class="cardc-content">
                  <h4>Hello world</h4>
                  <p>something something</p>
                  <p>something something</p>
                  <p>something something</p>
                </div>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="panel-title">
            <p>Done</p>
        </div>
        <div class="panel-content">
            <div class="cardc small" id="done_tasks">
                <div class="cardc-content">
                  <h4>Hello world</h4>
                  <p>something something</p>
                  <p>something something</p>
                  <p>something something</p>
                </div>
            </div>
        </div>
    </div>
</div>