chrome在css转换后留下额外的空间

Question

chrome在转换后会留下额外的空间。

复制问题：打开响应模式(例如以iphone5/SE为例(因为元素x的位置+元素宽度大于水平滚动条的视口。这是可以的，但问题是当你点击按钮"更新变换"(它只会更新/变换元素x的位置(之后，就不需要额外的空间或水平滚动条，但chrome似乎不会更新视口大小。(在本例中，变换后的宽度相同(。

附言：它在FF 中工作正常

<h2>test transform</h2>

<a href="/" class="hp-section-image-zebra">
<img src="https://uploads- ssl.webflow.com/5a7bafaa69f239000170771c/5a7e5dcdd2e04c0001f3fcdc_desktop.png" alt="Refurbished Apple Desktops">
</a>
<button onclick="updateTransformation()">update transformation</button>

<style>
body{
border: solid black;
}
.hp-section-image-zebra{
display: inline-block;
transform: translate(300px, 0px);
}
</style>
<script>
function updateTransformation() {
var el = document.querySelector('body > a');
el.style.transform="translateX(0px)";
}
</script>

代码笔示例

Answer 1

将此css用于所有浏览器：

.hp-section-image-zebra{
display: inline-block;
-webkit-transform: translate(300px, 0px);
-moz-transform: translate(300px, 0px);
-ms-transform: translate(300px, 0px);
-o-transform: translate(300px, 0px);
transform: translate(300px, 0px);
}