CSS transitions of transforms are not smooth

[paulrouget]

We are trying to build a sidebar that moves from the right of the window (offscreen) to cover the content, with a CSS transition, but it's very choppy.

Here is a slowed down screencast (had to use my camera, the screencast software doesn't show the progressive painting):

<style>
  div {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 100vh;
    background: rgba(255,0,0,1);
    transform: translateX(500px);
    transition: transform 400ms linear;
  }

  .show div {
    transform: translateX(1px);
  }
</style>

<p>
  Hey, what kinda party is this? There's no booze and only one hooker. This is the worst part. The calm before the battle. What's with you kids? Every other day it's food, food, food. Alright, I'll get you some stupid food. Hey, you add a one and two zeros to that or we walk! We're rescuing ya. And then the battle's not so bad?
</p>

<div>
</div>


<script>
  document.body.addEventListener('keypress', e => {
    if (e.charCode == 97) { // a
      document.body.classList.toggle('show');
    }
  });
</script>

[paulrouget]

Is this a regression or transition on transforms are not properly optimized yet?

[pcwalton]

They should be working. We'll need to dive into what exactly the problem is here.

(Though it could just be the lack of DLBI.)

[notriddle]

What's DLBI?

[metajack]

Display List Based Invalidation

[pcwalton]

Also WebRender might just fix this issue for good

[paulrouget]

Tried with WebRender. Animation is not smoother.

[glennw]

We looked into this and (at least for the webrender case) it's just that vsync wasn't enabled and it was tearing. I imagine that would fix the normal renderer case too, since it's such a simple transition it shouldn't take long to paint that.

[paulrouget]

@glennw figured it was because vsync was not used on osx. Adding with_vsync() to the glutin window improves the performance quiet a lot. PR: #7812