wake-up-neo.net

Webkit-Randradius und Überlauffehler bei der Verwendung von Animationen/Übergängen

Ich erhalte einen komischen Fehler, wenn ich eine Kombination aus overflow, border-radius und transition verwende. Ich habe ein Div mit einem Img darin. Das div hat einen Grenzradius und einen Überlauf, der auf ausgeblendet eingestellt ist. Wenn ich mit dem Mauszeiger über das Bild führe, habe ich einen Übergang, der das Bild vergrößert, um einen Zoomeffekt zu erzeugen. Das Problem ist, dass der Überlauf unten links und unten rechts im Bild zu brechen scheint.

Ich habe ein Jsfiddle für Sie erstellt, um zu sehen, worüber ich spreche. http://jsfiddle.net/dmcgrew/HuMrC/1/

Es funktioniert gut in Firefox, bricht aber in Chrome und Safari.

Weiß jemand, was das verursacht oder wie man es reparieren kann?

cssgoogle-chromesafariwebkitoverflow
30
Dustin

Ich weiß nicht, ob ich das Problem richtig verstehe, da das Bild nicht geladen wird. Wenn Sie height: 100%; zu .inner_block hinzufügen, hilft das Ihrem Problem?

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

2
mikevoermans

Ich hatte genau das gleiche Problem. Das Hinzufügen zum übergeordneten Container löste es für mich (dies ist ein LESS-Mixin).

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

Ich habe einen negativen Z-Index-Wert für das Bild und einen höheren Wert für das übergeordnete Element hinzugefügt

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

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

Die akzeptierte Antwort hat für mich nicht funktioniert, weil ich nicht durch den klaren Rand die anklickbare Fläche des maskierten Elements vergrößern kann oder möchte, dass das die anderen Elemente verdeckt die Angelegenheit).

Siehe meine Antwort auf eine verwandte Frage für eine mögliche Lösung.

1
bschnur

Ich hatte in der Vergangenheit ein Problem wie dieses, als ich versuchte, ein Foto in einem div zu vergrößern. Ich behebte das Problem, indem ich der Skalentransformation die Drehung scale(1.05) rotate(0.02deg) hinzufügte

Heute geht es mir darum, die Glitch-Linien von einem translateY-Div-Hover-Effekt abzuhalten. Überraschenderweise habe ich sie entfernt, indem ich overflow: hidden; entfernt habe.

Hoffentlich hilft dies zukünftigen Debuggern.

0
mateostabio