Scale transformation under flexbox renders differe

2019-07-27 03:31发布

问题:

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>

回答1:

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;
}