Reducing scroll jank when using overflow-y: scroll;
<p>I have a 2 column layout, the right hand column is a scrollable result lists with a max of 200 item results (basically just a ul with <code>overflow-y: scroll;</code> set)</p>

<p>What I am finding is that the right hand column is causing some jank (which is especially noticeable on low end hardware) when you scroll.</p>

<p>In the chrome timeline i can see some major "Update Layer tree" while I scroll the column.
Is there any way I can figure out why "Update Layer tree" is so lengthy and what CSS properties are affecting speed the most? 
When I click on it - just gives me info on how long it ran for and nothing else.</p>

<p>I have some CSS in each of the li's that isn't performing very well (eg. filters, transforms, box-shadows etc) - 
If i remove each SASS file one by one, it improves the scrolling performance (and eventually removes jank once i remove all the CSS), but obviously its hard to pin point which css properties are not performing doing this.  </p>

<p>I wonder if im missing something in the chrome timeline that can be helpful in this regard?</p>

<p>I have tried to use the <code>will-change</code> CSS property to promote the scroll to a different layer / force hardware acceleration - but this doesn't make much difference.</p>

<p>Also there is no javascript events executing while I scroll. </p>

<p>Limiting to less than 200 items isn't an option. </p>

<p>I have setup an example of this (I know its a longer list of items, but this is just for demo purposes): 
<a href="https://github.com/jooj123/jank/blob/master/scroll.html" rel="noreferrer">https://github.com/jooj123/jank/blob/master/scroll.html</a></p>

<p>What really interesting is that if i remove the <code>overflow-y: scroll;</code> (in .map-search__results in the example above) the scrolling becomes very smooth and jank disappears - why does this have so much effect?</p>

<p>Here is the chrome timeline (with basically just long "Update Layer tree" sections):
<a href="https://i.stack.imgur.com/UYGy8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UYGy8.png" alt="enter image description here"></a></p>

<h1>Fix:</h1>

<p><a href="https://stackoverflow.com/questions/39261456/reducing-scroll-jank-when-using-overflow-y-scroll/39377543#39377543">Paul's answer about <code>will-change: transform</code> is spot on</a>, in particular this tidbit helped:</p>

<blockquote>
  <p>"Add will-change: transform;. Once added, the "repaints on scroll" rect is gone." </p>
</blockquote>

<p>BUT just be careful as it wont always apply depending on your code base, check the scroll performance issues indicator to make sure "repaints on scroll" is off, for me I had to also disable a <code>-webkit-clip-path</code> property (in my actual code base - not in the demo provided) that was set in one of the child divs, see:</p>

<p><a href="https://i.stack.imgur.com/rEHMl.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/rEHMl.gif" alt="enter image description here"></a></p>