时间戳

首页 > 解决方案 > chrome在css转换后留下额外的空间

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

问题描述

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

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

PS它在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>

代码笔示例

标签： cssgoogle-chromecss-transitionscss-transformstranslate

解决方案

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

推荐阅读