Flexslider Border-Radius Does Not Wrap Image in Chrome, Safari, But Will in Firefox

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

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

Flexslider Does Not Work in Firefox or Safari

I am also facing the same problem. Checked console on FireFox and error is this one:

ReferenceError: onTouchStart is not defined
el.addEventListener('touchstart', onTouchStart, false);

jquery....ider.js (linha 398, col 12)

So... I don't know what to do! :(

EDIT:

I had this issue solved by downloading this:

https://raw.githubusercontent.com/miketaylr/FlexSlider/8af7e0d02d332da4ca8e9dc094f6dd4aa3933d6d/jquery.flexslider.js

Hope this helps future visitors too!

Webkit border radius combined with css3 translate3D bleeding

I have answered this question before. It is a webkit bug.

Add this code to the same selector you are adding border radius too

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

http://jsfiddle.net/R5L3K/14/

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

CSS Masking (Webkit) - How does one code this circle?

1. Most commonly, url is used in the context of defining a background-image. You instruct to load the specified image from the given uri. You can read more about it here. Example:

   background-image: url("images/darkpattern.png");

2. image/png is a so called MIME-TYPE and defines which type of content you're describing (text, video, audio, image, ...). So basically you could insert any type of media. Base64 is the used charset and is in this case a scheme for presenting binary data in ASCII format.

3. What's done here is instead of loading a png image which is stored somewhere on the web server, include the contents of this image right in the css. If you were to open this png file with your notepad, you'd see a lot of weird symbols specific to its encoding. Encoded in base64 should be equivalent to the string above ("iVBORw0KGgoAAAA..."). You have to consider, that using this technique you save a request, but at the same time lose the ability to cache the image. This means every request will load the image once more, which is why this is only advised for small pictures. Personally i don't like this technique as a whole.

---

Related Topics