Transforms and transitions not applied

[youraerials]

When transforming DIV elements to create a cube and adding a hover stat to animate their container, Servo+WebRender doesn't apply rotation transforms correctly and doesn't render the transition.

Check out the attached example in Aurora (which appears to ignore the perspective) and Chrome (which renders as expected). To test, I'm running

servo -Z wr-stats -w --resolution=1024x768 transforms-bug.html

On OS X 10.11.3, Macbook Pro, 2.8 GHz Intel Core i7

transforms-bug.html.zip

[nox]

Can confirm.

[mrobinson]

I can confirm this is still an issue. There seems to be two issues here:

• A bug in hit testing
• Lack of proper transition reversing

What is happening is that because of a bug in hit testing, we are detecting a hover at various places throughout the page. The areas that trigger these hit tests are tiny so the hover period is typically instantaneous and generally over before being noticeable. The restyle is enough to trigger a 15 second long transition though. When the short, buggy hover is over, the transition continues, because we don't implement proper replacement and shortening.

[mrobinson]

This should be fixed now, though there are still issues with hit testing. Essentially, the cube will start to rotate when hovering random bits of the page, because the hit test is returning true in places that it should not be.

[mrobinson]

Here is the test case so that it can be easily copy-and-pasted:

<style>
  .cube-container {
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    transform-origin: center center -150px;
    transform: rotateX(0) rotateY(0);
    transition-property: transform;
    transition-duration: 15s;
  }

  .cube-side {
    position: absolute;
    width: 300px;
    height: 300px;
    transform-origin: 150px 150px -150px;
    transform-style: preserve-3d;
  }
  .cube-side-1 { background-color: firebrick; transform: rotateX(0deg) rotateY(0deg); }
  .cube-side-2 { background-color: greenyellow; transform: rotateX(90deg) rotateY(0deg); }
  .cube-side-3 { background-color: blueviolet; transform: rotateX(180deg) rotateY(0deg); }
  .cube-side-4 { background-color: blue; transform: rotateX(270deg) rotateY(0deg); }
  .cube-side-5 { background-color: yellow; transform: rotateX(0deg) rotateY(90deg); }
  .cube-side-6 { background-color: darkorange; transform: rotateX(0deg) rotateY(-90deg); }

  .cube-container:hover {
    transform: rotateX(360deg) rotateY(720deg);
  }

  .cube-container:hover .cube-side-1 {
    background-color: pink;
  }
</style>

<div id="blah" class="cube-container">
      <div class="cube-side cube-side-1"></div>
      <div class="cube-side cube-side-2"></div>
      <div class="cube-side cube-side-3"></div>
      <div class="cube-side cube-side-4"></div>
      <div class="cube-side cube-side-5"></div>
      <div class="cube-side cube-side-6"></div>
</div>

[jdm]

Want to file a separate issue about the hit testing, in that case?

[mrobinson]

Great idea. I've opened #26608 to track the hit testing issues and will close this one.