Zurück zur Übersicht

CSS: Safari border-radius + overflow: hidden + CSS transform fix

#Tutorials #CSS

Der Safari-Browser hat bei CSS-Transitions an Elementen, die overflow:hidden haben, Probleme mit dem Rendern. So kann es vorkommen, dass die ausgeblendeten Inhalte kurz aufflackern, sobald die Animation beginnt. 

Mit dem folgenden kleinen Snippet lässt sich das Ganze lösen: 

// Bei einem Element mit overflow hinzufügen
-webkit-mask-image: -webkit-radial-gradient(white, black);

Kommentare

Es gibt noch keine Kommentare. Sei der Erste!

Hinterlasse einen Kommentar

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.