Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

border-radius bug in Opera

Tags:

css

opera

A while ago i made a little page for myself and I stumbled upon a bug that a have since not been able to answer.

When opening http://darngoodpictures.com/#showme you see navigation arrows on the left and on 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 behaviour 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 being combinated 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 :)

like image 387
hurrtz Avatar asked Mar 31 '13 15:03

hurrtz


People also ask

Why border-radius is not working?

If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working.

Can I use CSS border-radius?

With CSS3, you can give any element “rounded corners” by using the border-radius property. The value can be in any valid CSS length unit.


1 Answers

.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;
       }
like image 192
Piyush Marvaniya Avatar answered Sep 21 '22 09:09

Piyush Marvaniya