0

I am investigating why transform: scale(2) changes my footer position, and interestingly, I can reproduce something similar with transform: scale(1). So I am comparing these two documents, which I would expect to appear identical:

<body style="background-color: #000000; color: #ffffff; transform-origin:top left; transform:none">
  <footer style="position:fixed; bottom:0">I'm down here!</footer>
</body>

<body style="background-color: #000000; color: #ffffff; transform-origin:top left; transform:scale(1)">
  <footer style="position:fixed; bottom:0">I'm down here!</footer>
</body>

However, the footer position is different between the two - note the (visual) distance to the bottom, while the computed bottom is the same:

enter image description here

enter image description here

enter image description here

enter image description here

Fabian S.
  • 2,441
  • 2
  • 24
  • 34
bers
  • 4,817
  • 2
  • 40
  • 59
  • the duplicate deals with filter but it's a generic duplicate detailing at the end all the properties that have the same effect (including transform) – Temani Afif Nov 03 '21 at 11:21
  • See https://stackoverflow.com/a/35461412/4218046 – Fabian S. Nov 03 '21 at 11:23
  • @FabianS. that's not the same issue. That one doesn't involve position:fixed – Temani Afif Nov 03 '21 at 11:26
  • _"Positioning an element (i.e. setting its position to something other than static)"_. `fixed` is something other than `static`, so it actually similar is and describe whats happening. I personally encountered exactly this issue and that answer helped me understand what is happening. – Fabian S. Nov 03 '21 at 11:32
  • Thanks, everyone. For anyone else wondering, in this simple example one can add ` – bers Nov 03 '21 at 11:44

0 Answers0