Question

chrome转换后会留出多余的空间。

重现问题：打开响应模式（例如，使用iphone 5 / SE）由于元素x的位置+元素的宽度较大，因此将出现带有水平滚动条的视口。没关系，但是事情是，当您单击按钮“更新变换”（它只会更新/变换元素的x位置）之后，不需要多余的空间或水平滚动条，但是chrome不会更新视口大小。（在此示例中，转换后的宽度相同）。

P.S。在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

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

在CSS转换后，chrome留下了多余的空间

1 个答案: