Hi I've never seen a bug like this and I simply don't know where to start. Can anyone tell me what you think? Is it Javascript, CSS, the Browser or my Computer?
The best I can do to explain the bug is just ask that you watch the video.
What I am showing in Video 1 is a container that has a max-height. When it reaches that height it gets an overflow. When I start scrolling you will see the bug at the bottom of the screen.
This is an intermittent bug and sometimes when I scroll the "+" icon at the top also glitches (I have shown this in Video 2)
The icons are just background-image PNGs.
The browser is Chrome - Version 60.0.3112.113
Edit (19 Aug 2017): I have added a third video that I think illustrates the problem more clearly
Edit (19 Aug 2017): I am using display: grid and position: sticky in my CSS. My first guess was that it's a bug related to those properties... but even after eliminating them I still have the same problem
I'm not certain exactly why this problem occurs, but my guess is that it somehow relates to the z-index of the child elements. For some reason the browser is getting confused and it glitches out when it tries to repaint those elements.
I have added
transform: translate3d(0,0,0)to the child elements and this has resolved the issue.