Scale transformation under flexbox renders differe

2019-07-27 02:37发布

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>

标签： css google-chrome firefox flexbox css-transforms

1条回答

够拽才男人

2楼-- · 2019-07-27 03:37

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>

0人赞添加讨论(0) 举报

Scale transformation under flexbox renders differe

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间