-webkit-overflow-scrolling:触摸导致jQuery动态变化不显示？

Question

我在父div中有一堆div，这个父div允许水平滚动。

我设置了一些jQuery，以便在单击这些子div时更新它们的外观。这对于前几个在加载时可见的div来说工作得很好(也就是没有滚动)。然而，在移动设备上，对于需要水平滚动才能看到的div，我可以断定jQuery确实可以识别点击的发生，但外观的更改是不可见的(例如，在下面的示例代码中，span元素的文本似乎没有更改)。我发现，如果我从父div中删除"-webkit-overflow- scrolling : touch“属性，那么它就能正常工作(当然滚动体验就不那么好了，所以理想情况下我希望两者都是最好的)

下面是指示性代码。该问题在移动Chrome和Safari (在iOS上)上都会出现。谢谢你的帮忙!

<style>
 .hori-scroll {
        white-space: nowrap;
        overflow-x:auto;
        /*-webkit-overflow-scrolling: touch;*/
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
</style>

<div class='hori-scroll'>
    <div class='child'>
         <span class='grandchild'></span>
    </div>
</div>


<script>
   $('.child').click(function(){
       $(this).find('.grandchild').text('changed');
    });
</script>

Answer 1

我刚刚发现，将此CSS应用于子元素可以消除此问题：

-webkit-transform: translate3d(0,0,0)