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

работа с CSS3 property transform: scale, Я нашел интересный вопрос. Я хотел сделать небольшой эффект масштабирования для фотографий. Но когда я использовал для родительского div overflow: hidden и border-radius, дочерний div расширил пределы родительского div.

обновление:

проблема не решена. Если я добавлю transition, все еще не работает. Я пытался решить эту проблему, но безуспешно.

здесь демо

11 ответов


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

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


прозрачная граница не работала для меня, но для изменения 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-индекса.


transform: translateZ(0); на элементе wrap сделал трюк для меня.

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


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

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

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


это происходит из-за того, что составные слои не обрезаются родительскими слоями. Поэтому иногда вам нужно привести родителя с 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


здесь решение.

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 окружающие поле. Надеюсь, это поможет.


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


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

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

 transform:translateX(0);

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


Я был после этого в течение длительного времени и единственное, что работал для меня этот 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);
}

хорошо... попытка найти обходной путь обнаружила, что

-webkit-appearance: button; 

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