web-dev-qa-db-fra.com

Bogue Webkit border-radius et débordement lors de l'utilisation d'une animation/transition

Je reçois un bogue étrange lorsque j'utilise une combinaison de overflow, border-radius et transition. J'ai un div avec un img à l'intérieur de celui-ci. Le rayon et le débordement de la div sont définis sur masqué. Lorsque je survole l'Img, une transition se produit qui agrandit l'image pour créer un effet de zoom. Le problème est que le débordement semble se rompre en bas à gauche et en bas à droite de l'image.

J'ai créé un jsfiddle pour que vous puissiez voir de quoi je parle. http://jsfiddle.net/dmcgrew/HuMrC/1/

Cela fonctionne bien dans Firefox, mais rompt dans Chrome et Safari.

Quelqu'un sait ce qui pourrait causer ceci ou comment le réparer?

cssgoogle-chromesafariwebkitoverflow
30
Dustin

Je ne sais pas si je comprends correctement le problème car l'image ne se charge pas. Si vous ajoutez height: 100%; à .inner_block, cela vous aidera-t-il?

http://jsfiddle.net/HuMrC/2/

2
mikevoermans

J'ai eu exactement le même problème. L'ajout de cela au conteneur parent l'a résolu pour moi (c'est un mixin MOINS).

.transitionfix() {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0)
}
65
j-man86

J'ai ajouté moins la valeur z-index pour l'image et une valeur plus élevée pour le parent

li {z-index:10; overflow: hidden;}

li img {z-index: -10;}
3
Rijo K P

La réponse acceptée n'a pas fonctionné pour moi car je ne peux pas avoir de bordure claire augmentant la zone cliquable de l'élément masqué, je ne veux pas non plus qu'elle obscurcisse celle d'autres éléments (et régler la hauteur à 100% n'a pas résolu le problème).

Voir ma réponse à une question connexe pour une solution possible.

1
bschnur

J'ai déjà eu un problème de ce type dans le passé en essayant de zoomer sur une photo dans une div. Je l'ai corrigé en ajoutant une rotation scale(1.05) rotate(0.02deg) à la transformation d'échelle .__ (elle a en fait supprimé les lignes glitchy)

Mon problème d’aujourd’hui est d’avoir un problème d’effet translatif. Curieusement, je me suis débarrassé d'eux en supprimant overflow: hidden;

Espérons que cela aide les futurs débogueurs.

0
mateostabio