-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：translation3d（0,0,0）