Хром оставляет дополнительное пространство после преобразования CSS - PullRequest
Новая
       50

Хром оставляет дополнительное пространство после преобразования CSS

0 голосов
/ 30 октября 2018

хром оставляет дополнительное пространство после трансформации.

для воспроизведения вопроса: включить адаптивный режим (например, взять iphone 5 / SE) из-за того, что элемент x position + element width больше, появится окно просмотра с горизонтальной полосой прокрутки. Это нормально, но дело в том, что когда вы нажимаете кнопку «обновить преобразование» (она просто обновит / преобразует положение элемента 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>

пример кодекса

1 Ответ

0 голосов
/ 30 октября 2018

Используйте эту 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);
}
...