-webkit-overflow-scrolling: touch causes jQuery dynamic changes to not show?

Question

I have a bunch of divs within a parent div, where this parent div allows horizontal scrolling.

I have some jQuery set up to update the appearance of these child divs whenever they are clicked. This works just fine for the first few divs that are visible on load (ie without scrolling). However, on mobile, for the divs that require horizontal scrolling to see, I can tell that jQuery does recognise the clicks occuring, but the changes to the appearance is not visible (eg in the example code below, the span element's text doesn't appear to change). I've found that if I remove the "-webkit-overflow-scrolling: touch" property from the parent div, then it works fine (although then of course the scrolling experience isn't as nice, so ideally I'd like the best of both worlds)

Indicative code below. The issue occurs on both mobile Chrome and Safari (on iOS). Thanks for your help!

<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

Just found that applying this CSS to the child elements eliminates this problem:

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