Canvas with negative z-index issue on scroll in Chrome
This seems to be a Chromium/webkit (or blink) bug, and this fixes it, meeting all your criteria and no changes needed on the HTML
structure or the rest of the styles:
ul { /* rest of the styles */ -webkit-transform: translate3d(0,0,0);}