Ошибка с преобразованием: масштаб и переполнение: скрытые в Chrome

Ответ 1

Это известная ошибка в браузерах на основе Webkit - см. # 62363. Вы можете добавить border:1px solid transparent; в свой класс .wrap, чтобы обойти проблему.

Для обновленного требования, добавляя переход к элементу с border-radius, это еще одна известная ошибка Chomre/Webkit # 157218. Извините, но ни одного известного обходного решения пока нет, хотя один комментарий к этой ошибке говорит о том, что использование chrome://flags и использование флага --ignore-gpu-blacklist исправляет его в Chrome 29 (который просто ударил по каналу Chrome dev сегодня).

Ответ 2

Прозрачная рамка не работала для меня, но чтобы изменить z-индекс .wrap div и изображения (в моем случае изображение на самом деле является видео)

Вот css:

.videoContainer{
    overflow: hidden;
    z-index: 10;
}

video{
    margin-left: -55%;
    transform: scale(-1,1);
    -webkit-transform: scale(-1,1);
    -moz-transform: scale(-1,1);
    z-index: 0;
}

ПРИМЕЧАНИЕ: см. комментарий Джейка Блюза ниже о необходимости располагать элемент для правильной работы z-index.

Ответ 3

transform: translateZ(0); на элементе wrap помогло.

Для получения дополнительной информации об этой технике см. производительность CSS по сравнению с translateZ (0).

Ответ 4

Оба способа решения этого эмитента работали нормально:

• Добавьте следующую строку в родительскую оболочку (z-index: 0 не требуется для самого изображения): position: relative; z-index: 10

• Или добавьте transform: translateZ(0); в родительскую оболочку (с соответствующими префиксами для лучшей поддержки браузера)

Ответ 5

Это происходит из-за того, что слои с композицией не обрезаны их родительскими слоями. Поэтому иногда вам нужно привести родителя с overflow:hidden на свой собственный слой компоновки, чтобы он мог корректно применить overflow:hidden.

Итак, вы должны добавить свойство CSS transform: translateZ(0) к родительскому элементу вашего преобразованного элемента.

/* add to parent so it is composited on its own layer before rendering */
.parent-of-transformed-element {
     -webkit-transform:translateZ(0);
     transform:translateZ(0);
}

Затем overflow:hidden будет работать из-за того, что преобразованный элемент будет компоноваться на собственном уровне рендеринга, как его преобразованный ребенок.

Протестировано на последних сайтах Safari и Chrome на устройствах iOS и iOS

Ответ 6

Странно, я только столкнулся с этой проблемой после обновления до Chrome 65, и для меня добавив will-change: transform; чтобы стили IFRAME сделали свое дело.

Ответ 7

Вот Решение.

HTML:

<div class="wrap">
    <div class="image"></div>
</div>

CSS:

.wrap{
    width: 400px;
    height: 260px;
    overflow: hidden;
    border-radius: 15px;
    border:1px solid transparent;
}
div.image{
    background: url(http://blog.dothegreenthing.com/wp-content/uploads/2012/10/take-a-smile.jpg) no-repeat;
    width: 400px;
    height: 260px;


}
div.image:hover{
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    cursor: pointer;
    border:1px solid transparent;
}

Для Chrome требуется прозрачный border, окружающий поле. Надеюсь, это поможет.

Ответ 8

У меня была похожая проблема с последней версией Chrome 65. У меня видео iFrame, увеличенное с помощью transform: scale() в div, а в последней версии Chrome оно больше не маскировалось по бокам и высовывалось из родительский контейнер, даже с переполнением: скрытый;

Хотя translateZ вроде помог, только когда я использовал translateX на родителе, он правильно маскировал ширину:

 transform:translateX(0);

Ответ 9

В маске браузера все еще существует веб-браузер (Safari и Chrome под iOS). И тогда все обходные пути выше не работают. Но использование нестандартного свойства css -webkit-mask-box-image помогает также для масштабированных масок.

Ответ 10

Я был после этого долгое время, и единственное, что сработало для меня, это rotate(0.1deg) translateZ(0). Так что, если вы масштабируете элемент

.something:hover img{

    -webkit-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -moz-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -o-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    transform: scale(1.1) rotate(0.1deg) translateZ(0);

}

без поворота исправление не работает на моем конце.

Если вы добавляете transform к ЛЮБОМУ img parent (например, поворачиваете контейнер, в котором находится изображение), вам нужно добавить такое же исправление, например, к элементу.

.something_parent{
    transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -webkit-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -mos-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -o-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
}

Ответ 11

извините за мой плохой английский.

если на странице нет позиционированного элемента, нет необходимости устанавливать оба элемента контейнера и атрибут z-index дочернего элемента.

просто добавив z-index: 0 (или другой) атрибут к элементу контейнера.

.container {
    border-radius: .14rem;
    overflow: hidden;
    z-index: 0;
}
.child {

    }

Ответ 12

Ну... пытаясь найти обходное решение, найденное, что

-webkit-appearance: button; 

исправлено это поведение, но имеет некоторые нежелательные побочные эффекты, если элемент на самом деле не является кнопкой, например, границы ведут себя странно, но, заменив <a> на <button>, в моем случае сохранил масштабированное содержимое в пределах своих границ.