I'm currently working on a project that involves users navigating back and forth between modals. To achieve this, I decided to use CSS transitions to change the opacity from 0 to 1. However, I've encountered some issues with slow transitions.
Some of my transitions are experiencing lag delays ranging from 900ms to 2,000ms. In order to investigate the issue further, I connected my phone to my laptop using Chrome's remote dev tools https://developer.chrome.com/devtools/docs/remote-debugging and recorded performance events https://developer.chrome.com/devtools/docs/timeline
The screenshot shows the sequence of events captured on the phone. The yellow block represents the jQuery click event handler firing, while the vertical stripes indicate a jQuery.animate() function in progress. Interestingly, there is a lengthy green block at the bottom labeled "Rasterize Paint", lasting almost 2 seconds. The purple slivers on the right depict the actual animation taking place.
(EDIT: The jquery.animate() function is distinct from the CSS animation occurring simultaneously. I am adding a class in the event handler to modify the opacity of an element with transition: opacity 300ms applied)
https://i.sstatic.net/RzJGe.png
What exactly does 'Rasterize Paint' signify? Why is it causing such a delay? How can I mitigate this issue?
EDIT: Below is a fiddle of the page where these slowdowns are happening. Due to the lack of a meta tag, there might be an additional 300ms delay on mobile devices. I recommend following these steps: "Got It! -> Fighter -> Accept -> Archery". The transition after selecting "Archery" seems to be the slowest. Any insights into why this specific transition is sluggish would be greatly appreciated. My suspicion is that overlapping opacities might be contributing to the delay, but I'm not entirely certain. https://jsfiddle.net/2fLb1fd2/4/
.step {
position: absolute;
width: 100%;
max-width: 650px;
background: rgba(16, 16, 16, 0.8);
-webkit-transition: opacity 300ms linear, top 300ms linear;
-moz-transition: opacity 300ms linear, top 300ms linear;
-o-transition: opacity 300ms linear, top 300ms linear;
transition: opacity 300ms linear, top 300ms linear;
opacity: 0;
top: -100px;
left: 0;
right: 0;
margin: 30px auto 20px;
padding: 20px 20px;
color: white;
pointer-events: none;
text-align: center;
}
.step.showing {top:0;opacity:1;pointer-events:auto;}