問題を解決するのに役立ちました。これも簡単です。chromeまたはsafari(webkit)で機能しない理由は、overflow-hidden +positionrelativeおよびborderradiusを使用する場合にwebkitに既知のバグがあるためです。簡単な修正は、同じ要素にsvgwebkitマスクを追加することです。
.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;
}
これによりエッジがギザギザになる可能性もあるため、別の可能な解決策は、フレックススライダー内の画像に境界線の半径を設定することです:(これは、ホバートランジションを使用して下の画像で行っていることです)
.flexslider .slides img {
max-width: 100%;
display: block;
border-radius: 100px;
}
お役に立てれば