Working with "Rasterize Paint" lag on mobile when using css3 transition: opacity
I am working on a project where users switch between modals. I am trying to do this using css, changing the opacity from 0 to 1. However, I noticed that something was happening very slowly with my transitions.
I am getting latency lag in the range of 900ms to 2000ms with some of my transitions, so I connected my phone to my laptop using chrome remote developer 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 recorded events released from the phone. The yellow box is the jQuery event handler arrow, the yellow bars belong to the jQuery.animate () function. However, this green block at the bottom is almost 2 seconds long and is referred to as "Rasterize Ink". The purple stripes on the right are real animation. (EDIT: jquery.animate () is different from css animation happening at the same time. I add a class to the event handler that changes the opacity of the element from transition: opacity 300ms
)
What does "Rasterize Paint" mean? Why is it taking so long? What can I do to avoid this?
EDIT: Here is the fiddle of the page I'm running on. I was unable to get the meta tag fiddle so that it could have an additional 300ms latency on mobile. I recommend going through the "Got It!" -> Fighter -> Accept -> Archery "After selecting" Archery "which is the slowest transition on the page. Why that? I guess layered opacities make this 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 to share
Your problem here is probably not opacity, opacity is a very cheap property (in terms of performance) to animate with CSS. You are animating a property top
, however, this will trigger a payout for each frame it animates.
To make your animation smoother, you should animate transform: translateY(x);
instead of a property top
.
source to share