CSS Transform + CSS Transition = Skipped Frames [Google Chrome]

css transform + css transition = skipped frames [Google Chrome]

Seems to be a Chrome bug related to transitioning a single property.

To make your second example suit your needs, you can add a silly transition

$('.scene').on('click', function() {  $('.box').toggleClass('box-transform');});

.scene {  width: 500px;  height: 500px;  position: absolute;  background: #efefef;}
.box {  position: absolute;  left: 250px;  top: 100px;  width: 70px;  height: 140px;  background: #000;  transform: rotate(0deg);  transform-origin: bottom left;    perspective: 1000px;    transition-property: transform perspective;    transition-duration: 600ms;    transition-timing-function: linear;    transition-delay: initial;}
.box-transform {  transform: rotate(-90deg);    perspective: 1001px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="scene">  <div class="box"></div></div>

How to fix jerky, frame-skipping CSS3 :hover transition of transform property in Chrome? Works in all other browsers

Just add the perspective also to the base (unhovered) element.

corrected fiddle

Added CSS:

.shot {
    -webkit-transform: perspective(600px);
}

The problem is that the perspective in the base element is undefined; different browsers can handle this in different ways.

Android Google Chrome menu-burger transition issue(translateY doesn't work properly)

So, it seems the problem was in translating SVG. Just changed code, and it works smoothly now.

const menu = document.querySelector(".mini-menu");

menu.addEventListener("click", () => menu.classList.toggle("opened"));

html, body
{
  width: 100%;
  height: 100%;
  margin: 0;
}

.container
{
  display: flex;  
  width: 100%;
  height: 100%;
  background: #47b6e04a;
  justify-content: center;
  align-items: center;
}

.mini-menu
{ 
  display: flex;  
  flex-direction: column;  
  width: 70px;
  height: 92px;
  cursor: pointer;
  transition: all .4s linear;
}

.line
{
  margin-bottom: 20px;
  width: 100%;
  height: 4px;
  background: #000;
  transition: all .4s linear;
  
}   

.line_top
{
  margin-top: 20px;
}

.line_bottom
{
  margin-bottom: 0;
}

.mini-menu.opened
{
  transform: rotate(45deg);
}

.mini-menu.opened .line_top
{
  transform: translateY(24px); 
}

.mini-menu.opened .line_mid
{            
  transform: rotate(-90deg);
}

.mini-menu.opened .line_bottom
{
  transform: translateY(-24px);
}

<div class="container">  
    <div class="mini-menu">
      <div class="line line_top"></div>
      <div class="line line_mid"></div>
      <div class="line line_bottom"></div>
    </div>
</div>

Identifying cause of frames dropping using CSS3 animations

Optimization is just guessing without having a page to look at, but I can give you some thoughts that might be useful.

The CSS transform and opacity properties do not trigger layout or paint. It doesn’t matter if the animation is handled by JavaScript or CSS. Something else than the transform must be causing it. A full list of the work triggered by individual CSS properties can be found at CSS Triggers, and you can find a full guide on creating High Performance Animations on HTML5 Rocks. My guess is that you can do a lot of render tree, layout and paint optimization.

Use will-change to ensure that the browser knows what you plan to animate. The will-change property allows you to inform the browser ahead of time of what kinds of changes you are likely to make to an element, so that it can set up the appropriate optimizations before they’re needed. The elements can be changed and rendered faster, resulting in a smoother experience. In the case of your sample, adding will-change for transforms looks like this:

.page {
  will-change: transform;
}

Note: Do not use will-change on too many elements, it will cause the opposite. Currently Chrome, Firefox and Opera support this feature. It seems to get support from all modern browsers in the future.

CSS Transition: opacity and visibility transition not working on Firefox (works on Chrome / Safari)

I think this is due to when the visibility is changed in the transition and seems to display inconsistently between browsers.

This demonstrates your code and for me in Firefox if you toggle the element quickly it does not transition smoothly. This is always how I've done similar transitions and only recently started noticing the problem.

var element = document.querySelector(".element")var toggle = document.querySelector(".element-toggle")
toggle.addEventListener("click", function(event) {  element.classList.toggle("active");});

.element{  opacity: 0;  visibility: hidden;  transition: opacity 500ms ease, visibility 500ms ease;}
.element.active{  opacity: 1;  visibility: visible;}

<div class="element">This is a div element</div>
<button type="button" class="element-toggle">Toggle</button>

CSS translate animation stutter/jank

I managed to get a Chromium engineer to look into this on Twitter.

https://mobile.twitter.com/flackrw/status/1225116562010656769

Sadly the animation isn't composited because the percentage transform keyframe is dependent on a layout size. This isn't fundamental and it's on our short list of things to fix! https://crbug.com/389359 It's a good example of why compositing effects helps a lot.

But switching from translateX(1000%) to 400px didn't help. https://css-stutter.glitch.me/ So another bug was filed:

https://mobile.twitter.com/flackrw/status/1225144162858799104

Thanks for trying - I'm able to see the same! I filed https://crbug.com/1049248 and recorded a trace where I saw that the call to SwapBuffers is taking a long time once in a while. Feel free to add any details I may have missed.

So hopefully we'll have an answer there soon-ish. I also see the same issue on Safari 13 for macOS 10.15, so I've filed a WebKit bug as well.

https://bugs.webkit.org/show_bug.cgi?id=207282

There appears to be no way to work around this issue at this time.

css transform, jagged edges in chrome

In case anyone's searching for this later on, a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. In my own tests, this has completely smoothed them out. Hope that helps.

-webkit-backface-visibility: hidden;

Css3 animation jumps to last keyframe on mobile without animating

Turns out this is an issue with how iOS and the mobile broswers handle the animation play state... Essentially they don't.

The solution was to add the class

.no-animation {
    animation: none !important;
}

to the element, and remove that class with js when the time is right. Feels kind of like a hack, but its the only thing I could find to work on both mobile and desktop. If anyone has better suggestions, I'd love to hear them!

---

Related Topics