[BUG] `.toHaveScreenshot()` does not respect `backface-visibility: hidden;` CSS property

[ngnijland]

System info

• Playwright Version: v1.30.0
• Operating System: macOS, Docker with mcr.microsoft.com/playwright:v1.30.0-focal
• Browser: WebKit

Source code

HTML and CSS is to sketch the situation. The screen recordings should give more context to the issue.

<div class="card-wrapper">
  <div class="card card--rotate-to-front">
    <div class="card-face card-face--front">
      <div class="card-frame card-frame--front" style="transform: none;"></div>
    </div>
    <div class="card-face card-face--back">
      <div class="card-frame card-frame--back"></div>
    </div>
  </div>
</div>

.card-wrapper {
     perspective: 800px;
}

.card {
    transform-style: preserve-3d;
}

.card--rotate-to-front {
    animation: rotateBounceToFront;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.card--rotate-to-back {
    animation: rotateBounceToBack;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.card-face {
    backface-visibility: hidden;
}

The above HTML and CSS (among other code) result in the following interface:
https://user-images.githubusercontent.com/4727742/224694220-047a0a1a-0ed4-4315-865e-e4f8480027b2.mov

Config file

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: "Mobile Safari",
      use: { ...devices["iPhone 12"] },
    },
});

Test file (self-contained)

test("gift cards", async ({ page, isMobile }) => {
    await page.goto("/gift-card");

    await page.getByText("Wondrous waterways").click();
    await expect.soft(page).toHaveScreenshot("card.png");
});

Steps

• Run test with --update-snapshots flag
• Let test take screenshot

Expected

Front of the card should be visible.

Actual

Back of the card is visible mirrored.

NOTE: The behavior of seeing the back of the card mirrored is the same as when you remove backface-visibility: hidden; css property from the .card-face class.

Video of the actual behavior:

Screen.Recording.2023-03-13.at.12.09.14short.mov

[dgozman]

I was able to reproduce with an example from MDN.

repro test here

import { test, expect } from '@playwright/test';

test('issue', async function ({ page }) {
  await page.setContent(`
  <style>
  /* Classes that will show or hide the
     three back faces of the "cube" */
  .showbf div {
    backface-visibility: visible;
  }

  .hidebf div {
    backface-visibility: hidden;
  }

  /* Define the container div, the cube div, and a generic face */
  .container {
    width: 150px;
    height: 150px;
    margin: 75px 0 0 75px;
    border: none;
  }

  .cube {
    width: 100%;
    height: 100%;
    perspective: 550px;
    perspective-origin: 150% 150%;
    transform-style: preserve-3d;
  }

  .face {
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    border: none;
    line-height: 100px;
    font-family: sans-serif;
    font-size: 60px;
    color: white;
    text-align: center;
  }

  /* Define each face based on direction */
  .front {
    background: rgba(0, 0, 0, 0.3);
    transform: translateZ(50px);
  }

  .back {
    background: rgba(0, 255, 0, 1);
    color: black;
    transform: rotateY(180deg) translateZ(50px);
  }

  .right {
    background: rgba(196, 0, 0, 0.7);
    transform: rotateY(90deg) translateZ(50px);
  }

  .left {
    background: rgba(0, 0, 196, 0.7);
    transform: rotateY(-90deg) translateZ(50px);
  }

  .top {
    background: rgba(196, 196, 0, 0.7);
    transform: rotateX(90deg) translateZ(50px);
  }

  .bottom {
    background: rgba(196, 0, 196, 0.7);
    transform: rotateX(-90deg) translateZ(50px);
  }

  /* Make the table a little nicer */
  th,
  p,
  td {
    background-color: #eeeeee;
    margin: 0px;
    padding: 6px;
    font-family: sans-serif;
    text-align: left;
  }

  </style>

  <table>
    <tr>
      <th><code>backface-visibility: visible;</code></th>
      <th><code>backface-visibility: hidden;</code></th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube showbf">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
        <p>
          Since all faces are partially transparent, the back faces (2, 4, 5) are
          visible through the front faces (1, 3, 6).
        </p>
      </td>
      <td>
        <div class="container">
          <div class="cube hidebf">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
        <p>The three back faces (2, 4, 5) are hidden.</p>
      </td>
    </tr>
  </table>
  `);

  await expect(page).toHaveScreenshot();
});

[dimkin-eu]

having same with 1.32.1, but not with 1.31.1 ( which is strange )

comparing screenshots with this property in reset.css makes some elements to look "transparent"

    -webkit-backface-visibility: hidden;

[yury-s]

Looks like the problem has to do with CSS perspective property which is not respected on the screenshots:

      perspective: 550px;
      perspective-origin: 150% 150%;

repro

import { test, expect } from '@playwright/test';

test('issue', async function ({ page }) {
  await page.setContent(`
    <style>
    .container {
      width: 150px;
      height: 150px;
      margin: 75px 0 0 75px;
      border: none;
    }

    .cube {
      width: 100%;
      height: 100%;
      perspective: 550px;
      perspective-origin: 150% 150%;
    }

    .face {
      display: block;
      position: absolute;
      width: 100px;
      height: 100px;
      border: none;
      line-height: 100px;
      font-family: sans-serif;
      font-size: 60px;
      color: white;
      text-align: center;
    }

    .right {
      background: rgba(196, 0, 0, 0.7);
      transform: rotateY(70deg);
    }

    </style>
    <div class="container">
      <div class="cube showbf">
        <div class="face right">3</div>
      </div>
    </div>
  `);

  await expect(page).toHaveScreenshot();
});

[yury-s]

Turns out this is an upstream issue: https://bugs.webkit.org/show_bug.cgi?id=207266

[dimkin-eu]

@yury-s now we just wait for webkit devs ? :(

[yury-s]

Another related upstream bug: https://bugs.webkit.org/show_bug.cgi?id=242215