Flexbox下的缩放转换在Chrome和Firefox中呈现的方式有所不同 [英] Scale transformation under flexbox renders differently in Chrome vs Firefox
问题描述
我想居中div，然后缩放（通过transorm：scale）更大。
I want to center a div, and then scale it (via transorm:scale) to be larger.
我使用flexbox居中div。
我想使用整个视图空间，因此我给HTML和BODY元素一个100％的高度。
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.
在Firefox中，它可以很好地呈现。
但是在Chrome中，内部div的缩放似乎导致BODY元素溢出，并出现垂直滚动条。
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.
如果您运行以下代码段在Chrome和Firefox中，您会注意到其中的区别：垂直滚动条仅在Chrome中显示。我想在Chrome中像在Firefox中一样（无滚动条）。
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>
推荐答案
考虑使用 align-items / justify-content 代替元素的中心。 Chrome似乎也可以扩大导致此问题的利润：
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>
这篇关于Flexbox下的缩放转换在Chrome和Firefox中呈现的方式有所不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
