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 and started recording performance events

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?

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.

.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

This site uses Akismet to reduce spam. Learn how your comment data is processed.