web-dev-qa-db-fra.com

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

En travaillant avec la propriété CSS3 transform: scale, j'ai trouvé un problème intéressant. Je voulais faire un petit effet de zoom pour les images. Mais quand j'ai utilisé pour le parent div overflow: hidden et border-radius, le div enfant a étendu le delà de div parent.

Mettre à jour:

Le problème n'est pas résolu. Si j'ajoute transition, cela ne fonctionne toujours pas. J'ai essayé de résoudre ce problème, mais sans succès.

Voici un demo

google-chrometransformtransitioncss3
49
Jake Blues

C'est un bogue connu dans les navigateurs Webkit - voir # 62363 . Vous pouvez ajouter un border:1px solid transparent; à votre classe .wrap pour résoudre le problème.

Pour l'exigence mise à jour, ajouter une transition à un élément avec un border-radius, c'est un autre bogue connu de Chomre/Webkit # 157218 . Désolé, mais aucune solution de contournement générale n'est encore connue, bien qu'un commentaire sur ce bogue indique que l'utilisation du chrome://flags et de l'indicateur --ignore-gpu-blacklist le corrige dans Chrome 29 (qui vient de frapper le canal dev de Chrome aujourd'hui).

19
andyb

La bordure transparente ne fonctionnait pas pour moi mais pour changer le z-index de .wrap div et image travaillée (dans mon cas, image est en fait une vidéo)

Voici le 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.

27
Ken

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

Voir Performances CSS relatives à translateZ (0) pour plus d’informations sur cette technique.

23
lefoy

Les deux manières de résoudre cet émetteur ont bien fonctionné:

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

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

16
Mike Shema

Cela est dû au fait que les calques composés ne sont pas tronqués par leurs calques parents. Vous devez donc parfois amener le parent avec overflow:hidden sur son propre calque de composition afin 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);
}

Ensuite, overflow:hidden fonctionnera car l'élément transformé sera composé sur son propre calque de rendu, comme son enfant transformé.

Testé sur les derniers Safari et Chrome sur les appareils iOS et non iOS

9
Jonathan Marzullo

Voici la Solution .

Le 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'une border transparente entourant la boîte. J'espère que cela t'aides.

2
Nitesh

Étrangement, je viens juste de rencontrer ce problème après la mise à niveau vers Chrome 65, et pour moi, ajouter will-change: transform; aux styles IFRAME a été efficace.

2
Yousef Salimpour

désolé pour mon mauvais anglais.

si la page n'a pas d'élément positionné, il n'est pas nécessaire de définir l'élément conteneur et l'attribut z-index de l'élément enfant à la fois.

il suffit d'ajouter l'attribut z-index: 0 (ou autre) à l'élément conteneur.

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

    }
1
bob blunt

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

Bien que translateZ ait en quelque sorte aidé, c’est seulement lorsque j’ai utilisé translateX sur le parent qu’il masquait correctement la largeur:

 transform:translateX(0);
1
dyad

Je suis après cela depuis longtemps et la seule chose qui a fonctionné pour moi est cette rotate(0.1deg) translateZ(0). Donc, si vous redimensionnez 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 une transformation àN'IMPORTE QUEL PARENTimg (comme si vous faisiez pivoter le conteneur à l'emplacement de l'image), vous devez ajouter le même correctif à 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);
}
0
Benn

Le bogue existe toujours dans les navigateurs Webkit (Safari et Chrome sous iOS) lorsque le masque est redimensionné. Et puis toutes les solutions de contournement ci-dessus ne fonctionnent pas. Mais l'utilisation de la propriété css non standard -webkit-mask-box-image aide également les masques à l'échelle.

0
paul