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

Diti · 2019-04-01T08:57:05Z

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>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Diti commented Apr 1, 2019 •

edited

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

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

Comments

Diti commented Apr 1, 2019 • edited

Diti commented Apr 1, 2019 •

edited