A while ago I made a little page for myself and I stumbled upon a bug that I have since not been able to answer.
When opening http://darngoodpictures.com/#showme you see navigation arrows on the left and the right side. These are completely CSS-made. Nowadays I would go another way, but it's done and I'm sticking to it :)
In every browser I tested, the arrows looked like they should. The only exception is Opera. Opera renders the arrows in a way I have never seen before. Can anyone explain what is happening there? I figured out quite quickly that Opera has some issues with the border-radius-property of the arrows, but can anyone give more precise information? This behavior is so weird...
EDIT: It is getting weirder and weirder. Originally I thought, my CSS in combination with border-radius somehow triggered the issue, but the problem IS border-radius. It gets intensified when border-width is combined with it. See the following jsfiddles:
I: http://jsfiddle.net/62ujn/ (everything is rendered as one might expect)
Key rules:
border-radius: 0;
border-width: 200px;
II: http://jsfiddle.net/62ujn/1/ (first minor problems in Opera)
Key rules:
border-radius: 50px;
border-width: 200px;
III: http://jsfiddle.net/62ujn/2/ (up from here the rendering in Opera just gets ridiculous)
Key rules:
border-radius: 50px;
border-width: 200px 150px;
IV: http://jsfiddle.net/62ujn/3/
Key rules:
border-radius: 50px;
border-width: 200px 150px 100px;
V: http://jsfiddle.net/62ujn/4/
Key rules:
border-radius: 50px;
border-width: 200px 150px 100px 50px;
Strange. Very. Strange.
EDIT 2:
I just contacted Opera about this, as I suspect that there is no other answer than "Opera-Bug"... I'll keep this page updated when I get an answer that satisfies :)
Ok, just to officially end this question: Some time ago Opera has released a version that does no longer have these issues. So, clearly, it was a bug in Opera and they fixed it. Question closed :)