flexslider border-radius non avvolge l'immagine in Chrome, Safari, ma sarà in Firefox

Question

Sto provando ad avere una finestra oblò su un flexslider con l'opzione di animazione della diapositiva. Fondamentalmente l'immagine scivolerebbe ma sarebbe mascherata in un cerchio e sto cercando di ottenere questo risultato con il raggio e l'overflow del bordo: nascosto sul wrapper flexslider.

Controlla questa pagina in Firefox per vedere il risultato desiderato, perché funziona lì. Poi vedi che non funziona in Chrome o Safari. Ecco il link (la presentazione è la mia foto): http://imjoeybrennan.com/about.html

Qualsiasi aiuto è molto apprezzato! Grazie, Joey

Answer 1

ti ho appena aiutato con un problema. Anche questo è facile. Il motivo per cui non funziona in chrome o safari (webkit) è che c'è un bug noto con webkit quando si utilizza la posizione overflow-hidden + relativa e il raggio del bordo. La soluzione semplice è quella di aggiungere una maschera svg WebKit per lo stesso elemento:

.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; 
} 

Questo può anche causare i bordi frastagliati così un'altra soluzione possibile è quella di impostare il raggio di confine sulle immagini all'interno del vostro flexslider: (questo è quello che stanno facendo sulle immagini qui sotto con il passaggio hover)

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

Spero che questo aiuti