Effect flickers on webkit browsers

[nathanaeljames]

Hello! I love this effect and have been using it for years but noticed that recently it started glitching (flickering) on webkit browsers. Applying html{-webkit-transform:translate3d(0,0,0);} fixes the problem but causes many other problems. I opened an issue on Stack Overflow. Is there a specific element I should be applying this CSS property on?

[nathanaeljames]

Upon further investigation the issue is definitely one of width and height of transitionBackground on webkit browsers, and I think the hardware acceleration trick may have just worked coincidentally. I found that when I edit the modal.js function setLayerDimensions() and manipulate layerHeight I can significantly reduce how often the effect breaks but not remove the breaking entirely. I have had the most success with rounding to the nearest even number using layerHeight = 2*Math.round(layerHeight/2); but again, this doesn't fix the breaking completely. I'm sure there is a magical setting for rounding but I'm not sure how to find it.