I've spotted some weird behavior across browsers border-radius implementation. Take this code: http://jsfiddle.net/pm7FZ/1/ On Windows every browser excerpt Chrome rounds inner image: http://imgur.com/54In8 Chrome doesn't and the image stays square.
I don't have OS X, but my friend send me this: https://img.skitch.com/20120925-eypjk593tdest3ud9hcji1sauf.png Seems it behaves differently. Although another friend says that if you set border-radius to 20px on OS X it will round the image corners on OS X's version of Firefox.
Question - what is happening here? Why so much inconsistency.
I've spotted some weird behavior across browsers border-radius implementation. Take this code: http://jsfiddle.net/pm7FZ/1/ On Windows every browser excerpt Chrome rounds inner image: http://imgur.com/54In8 Chrome doesn't and the image stays square.
I don't have OS X, but my friend send me this: https://img.skitch.com/20120925-eypjk593tdest3ud9hcji1sauf.png Seems it behaves differently. Although another friend says that if you set border-radius to 20px on OS X it will round the image corners on OS X's version of Firefox.
Question - what is happening here? Why so much inconsistency.
It's obviously easy to "fix", just curiosity.
I seem to recall that border radius on images does not work on Chrome.
I believe that a wrapping element ( I use a 'figure' Chrome) is required but even that required exact dimensions.
You can 'round' pure image by border-radius in Chrome without a problem. That's not the thing here.
You are right but to get what you are after you need the wrapping element (div/figure)
http://codepen.io/Paulie-D/pen/Eikoz
Of course my example depends on knowing the image dimensions. I suspect someone cleverer than me could 'automate' it.
Here's an alternative (cleaner) option I found with a quick google search: http://codepen.io/Paulie-D/pen/DBfpe
It's not hard to achieve this. I'm just curious what's behind those different implementations.
Different companies have different interpretations of a spec that isn't set in stone.
So, shouldn't the spec be more specific? Is there a place where could I post this to get it to the spec?
I mean - it should follow the road where we don't need to think about those differences, just code and get the same result following the guidelines.
Sure is: http://www.w3.org/Style/CSS/current-work.en.html