Error in most browsers

Background:

As it suddenly appeared an order to create an interesting effect on the site. The work seems to be simple, but at the same time it required some thought. I myself have been doing layout for 3 years. And he did nothing of the kind. I appreciated the development and agreed. But here I was waiting for the pitfalls and the error that I found in version 1 affects Opera Next browsers (12.00 alpha b.1351). As for Google Chrome 19 (dev) and Mozilla FF 11 (release), IE9-10 - everything is in order. In version 2, Chrome surrendered.
')

Part 1st Prelude.

And so the essence of the bug is: parsing errors Opera Presto rendering engine 2.10 and some kind of IE engine. The bug is very rare as a combination of similar rules css2 and css3 is very rare.
Let's look at the official page Presto .



We see full css3 border-radius support.

Let's write a fairly simple html code:


link to the code.

And so is the task, we need a block of 150x150px in size,

overflow:hidden;

and inside a block with a size of 400x400px would seem to be the catch? After all, many who did the carousel himself, used this property.

The result in all browsers is expected ( link to the example ):


This is where we get to the essence of the error, I needed the “windows”, I decided not to cut a bunch of pictures, but simply use the css3 property by adding .p1 and .p2 to the classes:

border-radius:100%;

which works in all the latest version of popular browsers.


That's where the heat went.
Having written the similar code I saw: in Chrome 19 and FF 12, and in IE quite expected result:


Having opened Opera Next 11 alpha, I found the following ( link to an example ):

What is it? as? why? - I have these questions.

After all, it is a combination of standard properties that are fully supported by all browsers.

Part 2 WTF ?!

But moreover, I needed one more property, which, it seemed to me that it was quite combinable at least in Chrome and FF.
But here I was again waiting for a great sadness.

Link to code.

Having added a real positioning relative to the current location, Chrome 19 dev gave up and Opera Next 11 also showed no signs of life.
Result Chrome, Opera ( link to the example ):



But who really surprised so is the FF engine and IE, he passed the test!


I want to thank skobkin for the discussion on this topic.

Findings :

For myself, I found that we must always follow and study the behavior of css "rules".
Alas, I have not found a way. But! There is a small way to say a hack for real positioning is to use the properties of the margin.

I tried to make an article with an overview of the error and thought about a normal discussion on the topic: “why?”. And received only whiners and pedants. Thank you habr!

Decided to add to the article (thanks zapimir ):

Even as important, you need to understand that there are several engines in IE, and if there is no doctype, then at least you need to drop in at dev tools, before stating that it is in IE 9 that something does not work.

In general, unfortunately there are a lot of different rendering options. And by the way, just IE 9 pleases with attention to detail.
Here for example such a banal thing as border and border-radius. It seems everyone supports this for a long time, but if you make for example a dotted border type, then browsers start to be strange.


IE9, as for me, the most correct rendering yields (the points are round and evenly distributed along the border, not overlapping each other), Chrome believes that the points become quadrangular with the increase. In Opera and FF, the points are superimposed in FF; this looks particularly sloppy.

You can see on this page.

PS: This error will go to the opera and chrome bug tracker.
PS2: If you find a mistake in the article, please write to the PM.
PS3: I really want me to write in a personal for what we minus. I love criticism.
PS4: I naturally tested with dock taip. On a real project. It is closed and I can not show either his TK or himself. I understand everything, but blame the community for spitting.
PS5: Added a dock and made a valid document - hurray !.
PS6: The joke about png and jpeg is not relevant.
PS7: So as not to irritate the eye, the code made the images and place links to the corresponding code.
PS8: Moved examples to jsfiddle.