Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI does not ignore CSS transform on <body> (“upside-down everything”) #5377

Open
Diti opened this Issue Apr 1, 2019 · 0 comments

Comments

Projects
None yet
1 participant
@Diti
Copy link

commented Apr 1, 2019

During April Fools’ Day, I came across an upside-down page, which I tried to capture with Screenshots. It had the transform: rotate(180deg) CSS property on <body>.

The Screenshots UI was upside-down too, which, I believe, shouldn’t have happened.

A minimal example of such a page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Upside-down Screenshots UI</title>
    <style>
      body, html, p {
        margin-top: 0;
        margin-bottom: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box; /* Include default paddings in height calc */
        height: 100vh; /* Otherwise the Screenshots UI is not visible */
        transform: rotate(180deg);
      }
    </style>
  </head>
  <body>
    <p>As you can see, text is upside-down.</p>
  </body>
</html>

Upside-down UI before screenshot
Upside-down UI during sreenshot
Normal resulting screenshot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.