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

Question

I'm trying to have a porthole window look on a flexslider with the slide animation option. Basically the image would slide but be masked in a circle and I'm trying to accomplish this with border-radius and overflow:hidden on the flexslider wrapper.

Check this page out in Firefox to see the desired result, cause its working there. Then see that it doesn't in Chrome or Safari. Here is the link (the slideshow is the picture of me): http://imjoeybrennan.com/about.html

Any help is much appreciated! Thanks, Joey

Nonconformist

Answer 1

just helped you with an issue. This one is easy too. The reason it is not working in chrome or safari (webkit) is that there is a known bug with webkit when using overflow-hidden + position relative and border radius. The easy fix is to add an 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;
}

This can also cause jagged edges so another possible solution is to set the border radius on the images within your flexslider: (this is what you are doing on the images below with the hover transition)

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

Hope this helps

Heterotaxis

That's really an amazing solution. Thanks @Heterotaxis for sharing nice way around. I would also like to add that whoever is using Skitter Slideshow plugin and having tough time to apply border-radius to the images, this solution also works for that. – Conall