Bug avec transform: scale et overflow: caché dans Chrome

la bordure transparente n'a pas fonctionné pour moi mais pour changer le z-index de .l'envelopper de div et de l'image de travail (dans mon cas, l'image est en fait une vidéo)

Voici la 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;
}

NOTE: voir le commentaire de Jake Blues ci-dessous concernant la nécessité d'avoir un élément positionné pour permettre à z-index de fonctionner correctement.

transform: translateZ(0); sur l'enveloppe a fait l'affaire pour moi.

Voir CSS rendement par rapport à la translateZ(0) pour plus d'informations sur cette technique.

les deux façons de résoudre cet émetteur ont bien fonctionné:

1. ajouter la ligne suivante à un papier d'emballage parent ( z-index: 0 n'est pas nécessaire pour l'image elle-même): position: relative; z-index: 10

2. ou ajouter transform: translateZ(0); à un paquet parent (avec les préfixes correspondants pour une meilleure prise en charge du navigateur)

cela se produit parce que les couches compostées ne sont pas découpées par leurs couches mères. Donc parfois vous avez besoin d'apporter le parent avec overflow:hidden sur sa propre couche de composition pour qu'il puisse appliquer overflow:hidden correctement.

vous devez donc ajouter la propriété CSS transform: translateZ(0) à l'élément parent de votre élément transformé.

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

puis overflow:hidden fonctionnera grâce à la composition de l'élément transformé sur son propre Rendu couche comme son enfant transformé.

testé sur les derniers safaris et Chrome sur les appareils iOS et non iOS""

Voici la Solution .

Le code HTML:

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

Le 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 a besoin d'un transparent border entourant la boîte. Espérons que cette aide.

étrangement, je viens de rencontrer ce problème après la mise à niveau vers Chrome 65, et pour moi, l'ajout de will-change: transform; aux styles IFRAME a fait l'affaire.

j'ai eu un problème similaire avec la dernière version de Chrome 65. J'ai une vidéo d'iFrame agrandie en utilisant transform: scale() dans un div, et sur la dernière version Chrome, elle n'était plus masquée sur les côtés et sortait du conteneur parent, même avec overflow: hidden;

bien que translateZ ait en quelque sorte aidé, ce n'est que lorsque j'ai utilisé translateX sur le parent qu'il a masqué la largeur correctement:

 transform:translateX(0);

le bug existe toujours dans les navigateurs webkit (Safari et Chrome sous iOS) lorsque le masque est mis à l'échelle. Et puis toutes les solutions ci-dessus ne fonctionnent pas. Mais l'utilisation de la propriété CSS non standard -webkit-mask-box-image aide pour les masques à échelle ainsi.

je suis après cela depuis longtemps et la seule chose qui a fonctionné pour moi est ce rotate(0.1deg) translateZ(0) . Donc, si vous mettez à l'échelle l'élément

.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);

}

sans la rotation le correctif ne fonctionne pas de mon côté.

si vous ajoutez transform à N'importe quel img parent (comme tourner le conteneur où l'image est), vous devez ajouter même correction à l'élément par exemple

.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);
}

bien... essayer de trouver une solution a trouvé que

-webkit-appearance: button; 

fixe ce comportement, mais a certains effets secondaires indésirables si l'élément n'est pas en fait un bouton, comme les frontières se comportant wierd, mais, en remplaçant <a> par <button> dans mon cas a maintenu le contenu à l'échelle dans ses limites.