Ошибка с 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) для получения дополнительной информации об этой технике.
оба способа решения этого эмитента работали нормально:
добавьте следующую строку в родительской оболочки (
z-index: 0
не нужно для самого изображения):position: relative; z-index: 10
или добавить
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>
в моем случае сохранял масштабированное содержимое в своих пределах.