Dealing with "Rasterize Paint" lag on mobile when using css3: opacity transition

I am working on a project where users go back and forth between modals. I’m trying to do this by css transitioning opacity from 0 to 1. However, I noticed something is going very slow with my transitions.

I am getting about a 900ms to 2,000ms lag delay with some of my transitions, so I hooked up my phone to my laptop using chromes remote dev tools https://developer.chrome.com/devtools/docs/remote-debugging and started recording performance events https://developer.chrome.com/devtools/docs/timeline

This is an image of the recorded events fired from the phone. The yellow block is the jQuery click event handler firing, the yellow stripes belong to a jQuery.animate() function. However that green block at the bottom is almost 2 seconds long and it’s labeled “Rasterize Paint”. The purple slivers on the right are the actual animation taking place.
(EDIT: The jquery.animate() is different from the css animation taking place at the same time. I am adding a class in the event handler that changes opacity of an element that has transition: opacity 300ms set)

image of the recorded click event

What does ‘Rasterize Paint’ mean? Why does this take so long? What can I do to avoid this?

EDIT:
Here is a fiddle of the page I’m running. I wasn’t able to make a fiddle have the meta tag so it may have an extra 300ms delay on mobile devices. I recommend going through the steps “Got It! -> Fighter -> Accept -> Archery” After selecting “Archery” that is the slowest transition on the page. Why is that? I assume the layered opacities makes it very slow, but I still don’t know for sure.
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;}


Source: css3

Leave a Reply