flexslider border-radius nicht Bild in Chrome, Safari, aber wird in Firefox

Question

Ich versuche, ein Bullauge Fenster auf einem Flexslider mit der Folie Animation Option haben. Im Grunde würde das Bild gleiten, aber in einem Kreis maskiert werden, und ich versuche, dies mit Rand-Radius und Überlauf zu erreichen: versteckt auf dem Flexslider-Wrapper.

Überprüfen Sie diese Seite in Firefox, um das gewünschte Ergebnis zu sehen, damit es dort funktioniert. Dann sehen Sie, dass es nicht in Chrome oder Safari ist. Hier ist der Link (die Diashow ist das Bild von mir): http://imjoeybrennan.com/about.html

Jede Hilfe wird sehr geschätzt! Danke, Joey

Answer 1

half Ihnen nur mit einem Problem. Dieser ist auch einfach. Der Grund, warum es nicht in Chrome oder Safari (Webkit) funktioniert, ist, dass es einen bekannten Bug mit Webkit gibt, wenn Overflow-Hidden + Position relativ und Border Radius verwendet wird. Die einfache Lösung ist es, eine svg webkit Maske auf das gleiche Element hinzuzufügen:

.joey_pic .flexslider { 
-webkit-border-radius: 200px; 
-moz-border-radius: 200px; 
border-radius: 200px; 
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 
overflow: hidden; 
} 

Dies auch gezackte Kanten so eine weitere mögliche Lösung verursachen kann, ist die Grenze Radius auf die Bilder in Ihrem flexslider zu setzen: (das ist, was Sie dabei auf den Bildern unten mit dem Hover-Übergang wird)

.flexslider .slides img { 
max-width: 100%; 
display: block; 
border-radius: 100px; 
} 

hoffte, das hilft