Scale transformation under flexbox renders differently in Chrome vs Firefox

Question

I want to center a div, and then scale it (via transorm:scale) to be larger.

I use flexbox to center the div. I want to use the entire view space so I give the HTML and BODY elements, a 100% height.

In Firefox it renders nicely. In Chrome however, the scaling of the internal div seems to cause the BODY element to overflow, and a vertical scrollbar appears.

If you run the snippets below in Chrome and in Firefox you will notice the difference: the vertical scrollbar appears only in Chrome. I want to make this look in Chrome just like it looks in Firefox (no scrollbar).

Can anyone help me figure this out ?

html {
  height: 100%;   
  background-color: black;     
}

body {
  height: 100%;
  display: flex;
  overflow: auto;
  margin: 0;
  background-color: antiquewhite;
}

div {
  height: 50px;
  width: 50px;
  margin: auto;
  transform: scale(1.7);
  background-color: blue;
}

<html>
  <body>
    <div>
    </div>
   </body>
 </html>

related: https://stackoverflow.com/q/44550095/3597276 – Michael Benjamin Mar 03 '19 at 16:21 — Michael Benjamin, Mar 03 '19 at 16:21

score 2 · Accepted Answer · answered Mar 03 '19 at 15:24

Instead of margin consider align-items/justify-content to center the element. Chrome seems to also scale the margin causing this issue:

html {
  height: 100%;
  background-color: black;
}

body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background-color: antiquewhite;
}

div.box {
  height: 50px;
  width: 50px;
  transform: scale(1.7);
  background-color: blue;
}

<div class="box">
</div>

Scale transformation under flexbox renders differently in Chrome vs Firefox

1 Answers1

Linked