feature detect incorrect overflow with border-radius

Question

As we know does overflow: hidden in combination with border-radius not work in all browser as it should — namely Safari and Opera have problems cutting the rounded corners off contained images.

Example HTML:

<a class="circle" href="#">
    <img src="http://placekitten.com/300/300" alt="kitten" />
</a>

and corresponding CSS:

.circle {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    height: 120px;
    overflow: hidden;
    width: 120px;
}

check this jsfiddle

I do have a fall-back for Safari and Opera using background-images, but I only want to use it in case overflow isn't working well. Now, I don't want to simply use browser detection for known reasons, but I want to feature detect the ability to cut off the corners the right way. Normally I would check like this:

if('overflow' in document.body.style){
    // overflow
} else {
    // no overflow
}

But this will not help this time... So, is there any way to check it correctly?

There's no way to check this. It's not a feature you're trying to detect, but a DEEP bug. You can't 'ask' the browser if it has that bug. The part you can talk to doesn't know that. — Rudie, Apr 03 '13 at 17:58
@Rudie Maybe I should ask for **bug detection**... (Actually this is what I want to do: http://jsfiddle.net/SY9tY/) — AvL, Apr 03 '13 at 18:02
Why don't you give the `img` a border-radius too? You could even add the border to the img instead of its parent. — Rudie, Apr 03 '13 at 19:14
As you can see at the jsfiddle im my comment I want to resize the `a`-container on `mouseover` and later on "supersize" to the original dimensions of the image — like thumbnails you can click to see all of it. Therefore the images inside `a` must be larger than the container. I am working on a workaround right now — maybe I'll post it later... — AvL, Apr 03 '13 at 19:41
You can still do that by border-radiussing the `img` AND the `a`. You can even do it without the `a` by using `clip`. (If `clip` transforms, I'm not sure.) — Rudie, Apr 03 '13 at 22:59
looks fine on safari6 / mac. Opera is indeed an issue, but it only has a market share of a few percents (depending on audience and location), and as they are switching to webkit it should be fixed soon. Personally i wouldn't bother. The share for — Pevara, Apr 12 '13 at 15:21
I've ran into similar but different issues using border-radius in conjunction with other styles. With the downside of extra markup, i was able to just wrap another div and apply the styles to separate containers to remove my issues. — SomeRandomDeveloper, Apr 16 '13 at 18:58
As a half blind user, I find overflow: hidden to be a horrible layout option. If your bounding box does not resize to content, and it hides the content that overflows, you're likely to be incompatible with large text dpi settings and some browser zoom options. — Denise Skidmore, Apr 25 '13 at 18:47
@DeniseSkidmore: Totally degree on text elements with a hidden overflow. But in this case I just want to "hide" big images, which would expand to full size on click. It should kind of mimic a peephole to the image — therefore I can't just put the borders directly on the images because then I would have to resize the images — which would result in a different appearance... — AvL, Apr 26 '13 at 15:59
@AvL As long as the images don't transmit meaning, or there are good alt tags, that's reasonable. But if the images are just for looks, and your user is at a resolution that's incompatible with your layout, looks are pretty much hosed anyway. — Denise Skidmore, Apr 26 '13 at 16:08

score 1 · Answer 1 · answered Apr 29 '13 at 08:49

Why not css hacks?

@media screen and (-webkit-min-device-pixel-ratio:0) {

}

I believe this will target safari and opera.

Yes, chrome is webkit too. No, it wont be affected.

souce: http://css-tricks.com/is-there-any-dedicated-css-hacks-for-safari-or-opera/

Opera also has vendor css selector which is safer imo:

x:-o-prefocus {
}

feature detect incorrect overflow with border-radius

1 Answers1