Border-radius flexslider does not wrap image in Chrome, Safari, but will be in Firefox

Question

I am trying to open a porthole window on flexslider with a slide animation option. Basically the image will slide, but it will mask in a circle, and I'm trying to accomplish this with border-radius and overflow: hidden in the flexslider shell.

Check this page in Firefox to see the desired result, causing it to work. Then look that it is not in Chrome or Safari. Here is the link (slide show is an image of me): http://imjoeybrennan.com/about.html

Any help is much appreciated! Thanks Joey

Answer 1

just helped you with the problem. It is also easy. The reason it doesn't work in chrome or safari (webkit) is because there is a known bug with webkit when using an overflowing hidden positional relative and border radius. An easy fix is ​​to add the svg webkit mask to the same element:

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

It can also cause jagged edges, so another possible solution is to set the border radius on the images inside your flexslider: (this is what you do in the images below with switching to hover)

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

Hope this helps