border-radius bug in Opera

Question

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 :)

Wilbertwilborn

opera is used by like 2%. i wouldn't worry too much. or just change them to images i guess. shouldnt be that hard. – Adest

That's the best looking bug I've ever seen ! :D – Rochellerochemont

@Adest Both informations are not new to me. Am jsut seeking knowledge here ;) Why is this happening? This is just so darn strange... – Wilbertwilborn

@Wilbertwilborn dude i just downloaded opera to see what it looks like. it really is strange. but isn't particularly bad. i would like to know whats going on as well. – Adest

Damn, man, I want arrows like those, but in all browsers :D – Uniat

@Wilbertwilborn can you actually put that part (the button) on jsfiddle or something so we can have a look. – Adest

Here is fiddle jsfiddle.net/76tMr – Uniat

@Miljan Puzović thx, that's the code, alright :) Interestingly: Since my Opera-update a few minutes ago (now: 12.14) the flame-like look of the arrows is now somewhat reduced. But it is still visible, though. – Wilbertwilborn

Weird thing - if you remove one "transparent" property, arrow is all messed up. o.O – Uniat

And if you remove all transparent properties, the weird messup gives way to a proper rectangular rounded-border shape. dl.dropbox.com/u/1057626/Permanent/… – Trueblood

@Mitesh Ashar Really? I have posted some jsfiddles here and they do not have transparency anymore. But the behaviour remains. – Wilbertwilborn

I changed them realtime. I have also linked to a snapshot. – Trueblood

What version? Or is this obsolete now? – Underquote

Answer 1

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 :)

Wilbertwilborn

Answer 2

.round { 
       -o-border-radius topleft: 30px;  **//for Opera and Iphone5 Mobile**
       -o-border-radius topright: 30px;
       -o-border-radius bottomleft: 30px;
       -o-border-radius bottomright: 30px;
       }

Incarnate

Answer 3

what about tring to give to your div border-radius for crossbrowser behavior

 .arrow {
    border-radius: 30px;
    -o-border-radius: 30px;  //for Opera
    -webkit-border-radius: 30px; // for Chrome, Safari
    -moz-border-radius: 30px; // for Mozilla
    border-style: solid;
    cursor: pointer;
    height: 0;
    margin: 0 0 -15px 50px;
    width: 0;
  }

Roebuck

I can't see how that would help me. Vendor-prefixes are for browsers that don't support w3c-styles. To discover the bug opera had to interpret border-radius, otherwise it would have completely ignored the style. But apart from that: I have come to see that the current opera doesn't have the bug anymore. It has fixed itself, so to speak :) – Wilbertwilborn

Answer 4

These are indeed really funny looking artifacts ;) You're using a css-trick with 0 dimensions and border filling all the space. Only this causes problems in combination with border radius. Border-radius by itself works fine in opera in the most scenarios, even with very thick border Fiddle-Example and also in cases with 0-border and one color. But I know that we all love this little dirty tricks and opera's a fun stopper.

So, here's a ALTERNATIVE VERSION OF YOUR NAVIGATION ARROWS that works better with opera but it's also not perfect. Opera really sucks ;/

Html:

<div>
    <div class='first'></div>
    <div class='second'></div>
</div>

<div class='mirror'>
    <div class='first'></div>
    <div class='second'></div>
</div>

CSS:

div {
    width:200px; height:100px;
    background:none;   
    position:relative;
    margin-bottom:5px;
}

.first {
    position:absolute;
    left:0; top:0;
    width:60px; height:100px;
    background:black;
    border-radius:40px 0 0 40px;
    transform:scale(0.5, 1);
    -webkit-transform:scale(0.5, 1);
    -o-transform:scale(0.5, 1);
}
.second {
    position:absolute;
    left:57px; top:0;
    width:0; height:0;
    background:none;

    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid green;
    transform:scale(1.5, 1);
    -webkit-transform:scale(1.5, 1);
    -o-transform:scale(1.5, 1);
}

.mirror { 
    transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);    
}

The good news is that opera will stop developing it's own render engine and start using webkit. So your arrow problem will be solved automaticly with one of operas future updates ^^

Nomology

"... and start using webkit". Not really ;-), They start using and developing (as a supporter for Google) Blink, which is a fork of webkit but I guess very soon will be very different ...! – Waterlogged

But there is still hope that this specific bug will go away and some others too ;) – Nomology