servo transforms with in the transform renders incorrectly

Here is a simplified example of the grid that we are trying to render in browser.html to give the overview of tabs: https://output.jsbin.com/noyucu

If you render it with servo by running:

servo -w https://output.jsbin.com/noyucu

You'll see following:

While in other engines you'll see following:

This is likely related to some degree to #13819 and #13822 but I think it's more than that.

Oct 19 '16 22:10 Gozala

When I test that on Linux, I see the following:

bug

So it looks like it's mostly working - but that the clipping (or something similar) is incorrect. Could you confirm that's what you see on your machine too with current master?

Oct 24 '16 23:10 glennw

Minimal test case for the clipping / display issue:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style>
      .webviews {
        height: 2836px;
        transform: translateZ(-1300px) rotateY(30deg);
        background: grey;
      }
    </style>
  </head>
  <body>
    <div class="webviews">
    </div>
  </body>
</html>

Oct 24 '16 23:10 glennw

So it looks like it's mostly working - but that the clipping (or something similar) is incorrect. Could you confirm that's what you see on your machine too with current master?

Yep it's what I see now on Master on OSX as well.

Oct 25 '16 04:10 Gozala

Minimal test case for the clipping / display issue:

@glennw That's pretty much what I reported in #13819 there is also other issue #13822 that has another chunk of this code that also does not render right.

I am under impression that issue here is that first content is clipped and then transformed, rather doing that in reverse which causes incorrect rendering.

Oct 25 '16 04:10 Gozala

OK, I can see the problem.

We have this band-aid style solution right now for clipping with transforms, that sort of works enough to handle the basic cases, but falls over with anything more complex than that.

Instead of trying to extend the band-aid, I'm going to add proper support for transformed clip hierarchies. Apologies that this won't be fixed immediately, but a lot of the prep work for proper clip regions has landed now, so I am hopeful this should be done in a week or so.

Oct 26 '16 02:10 glennw

@kvark is working on fixing up the clip + transform issues, which should sort this out.

Oct 27 '16 19:10 glennw

I've been trying to test this bug against current WR for a couple of weeks, but I just get a gateway timeout. Is it possible to host this test case somewhere else?

Jul 05 '17 21:07 glennw

@glennw sorry for that, here is that example file as a gist https://gist.github.com/Gozala/d30e4417292499c518ae1b2d07633731

Jul 13 '17 20:07 Gozala


<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>transforms with in the transform renders incorrectly #13842</title>
  <style>
    .container {
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      perspective: 800px;
      perspective-origin: 80% 10%;

      background: black;
    }


    .webviews {
      position: relative;
      box-sizing: content-box;

      height: 2836px;
      transform: translateZ(-1300px) rotateY(30deg);

      outline: 3px dashed blue;
      background: grey;
    }

    .webview {
      position: relative;
      margin: 0 0 40px;
      z-index: 2;
      box-sizing: border-box;
      overflow: hidden;

      outline: 3px dashed red;
    }


    .webpage {

      position: absolute;
      top: 0;
      height: 100%;
      margin: 0;
      margin-right: 40px;
      overflow: hidden;

      outline: 3px solid green;
    }


    .r1 {
      height: 669px;
      width: 6095px;
      transform: translateX(-4876px);
    }

    .r2 {
      height: 669px;
      width: 2438px;
      transform: translateX(-1219px);
    }

    .r3 {
      height: 669px;
      width: 1219px;
      transform: translateX(0px);
    }


    .r4 {
      height: 669px;
      width: 1219px;
      transform: translateX(0px);
    }


    .c1 {
      background-color: blue;
      width: 1179px;
      right: 0px;
    }

    .c2 {
      background-color: rgb(165, 42, 42);
      width: 1179px;
      right: 1219px;
    }

    .c3 {
      background-color: orange;
      width: 1179px;
      right: 2438px;
    }

    .c4 {
      background-color: white;
      width: 1179px;
      right: 3657px;
    }

    .c5 {
      background-color: rgb(255, 192, 203);
      width: 1179px;
      right: 4876px;
    }

    .r2 .c1 {
      background-color: pink;
    }

    .r2 .c2 {
      background-color: yellow;
    }


    .r3 .c1 {
      background-color: purple;
    }

    .r4 .c1 {
      background-color: cyan;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="webviews">
      <div class="webview r1">
        <div class="webpage c1"></div>
        <div class="webpage c2"></div>
        <div class="webpage c3"></div>
        <div class="webpage c4"></div>
        <div class="webpage c5"></div>
      </div>
      <div class="webview r2">
        <div class="webpage c1"></div>
        <div class="webpage c2"></div>
      </div>
      <div class="webview r3">
        <div class="webpage c1"></div>
      </div>
      <div class="webview r4">
        <div class="webpage c1"></div>
      </div>
    </div>
  </div>
</body>

</html>

Jul 13 '17 20:07 jdm

Still broken.

Oct 05 '17 13:10 nox

Improved, but still incorrect. Screenshot 2024-08-03 at 1 41 28 AM

Aug 03 '24 05:08 jdm

Almost correct now - the blue outline on the gray square is rendered above the other squares, but everything else works. Tested on Arch Linux x86_64, servo built against commit id 9d29017c0dc6eec4ca7cd868cc13056e0bc0c64a, against Firefox 141.0.

Jul 26 '25 06:07 lumiscosity

servo servo copied to clipboard

transforms with in the transform renders incorrectly

servo
servo copied to clipboard