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

【问题标题】：chrome leaves extra space after css transformchrome在css转换后留下额外的空间
【发布时间】：2019-04-03 06:18:56
【问题描述】：

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

重现问题：开启响应模式（以 iphone 5/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>

codepen example

【问题讨论】：

标签： css google-chrome css-transitions css-transforms translate

【解决方案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);
}

【讨论】：

没有任何作用。