Ошибка пограничного радиуса в Opera

Некоторое время назад я сделал небольшую страницу для себя, и я наткнулся на ошибку, с которой с тех пор не удалось ответить.

При открытии http://darngoodpictures.com/#showme вы видите стрелки навигации слева и справа. Они полностью созданы CSS. В настоящее время я бы пошел другим путем, но это было сделано, и я придерживаюсь этого:)

В каждом браузере, который я тестировал, стрелки выглядели так, как должны. Единственным исключением является Opera. Opera делает стрелки таким образом, которого я никогда раньше не видел. Кто-нибудь может объяснить, что там происходит? Я довольно быстро понял, что у Opera есть некоторые проблемы с атрибутом border-radius от стрелок, но может ли кто-нибудь дать более точную информацию? Такое поведение настолько странно...

EDIT: Он становится более странным и странным. Первоначально я думал, что мой CSS в сочетании с радиусом границы каким-то образом вызвал проблему, но проблема IS border-radius. Он усиливается, когда граничная ширина сочетается с ним. См. Следующие jsfiddles:

I: http://jsfiddle.net/62ujn/ (все отображается как можно было бы ожидать)

Основные правила:

border-radius: 0;
border-width: 200px;

II: http://jsfiddle.net/62ujn/1/ (первые незначительные проблемы в Opera)

Основные правила:

border-radius: 50px;
border-width: 200px;

III: http://jsfiddle.net/62ujn/2/ (отсюда рендеринг в Opera просто становится нелепым)

Основные правила:

border-radius: 50px;
border-width: 200px 150px;

IV: http://jsfiddle.net/62ujn/3/

Основные правила:

border-radius: 50px;
border-width: 200px 150px 100px;

V: http://jsfiddle.net/62ujn/4/

Основные правила:

border-radius: 50px;
border-width: 200px 150px 100px 50px;

Странно. Очень. Странно.

ИЗМЕНИТЬ 2:

Я просто связался с Opera об этом, так как я подозреваю, что нет другого ответа, чем "Opera-Bug"... Я буду обновлять эту страницу, когда получаю ответ, который удовлетворяет:)

Ответ 1

Хорошо, просто чтобы закончить этот вопрос: некоторое время назад Opera выпустила версию, которая больше не имеет этих проблем. Так что, очевидно, это была ошибка в Opera, и они исправили ее. Вопрос закрыт:)

Ответ 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;
       }

Ответ 3

как насчет tring, чтобы придать вашему ракурсу радиус div для поведения кроссбраузера

 .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;
  }

Ответ 4

Это действительно забавные артефакты;) Вы используете css-трюк с 0 размерами и границей, заполняющими все пространство. Только это вызывает проблемы в сочетании с радиусом границы. Граница границы сама по себе отлично работает в опере в большинстве сценариев, даже с очень плотной границей Fiddle-Example, а также в случаях с 0-границами и один цвет. Но я знаю, что мы все любим эти маленькие грязные трюки и оперу, забавную пробку.

Итак, здесь АЛЬТЕРНАТИВНАЯ ВЕРСИЯ ВАШИХ ВОССТАНОВЛЕНИЙ НАВИГАЦИИ, которая лучше работает в опере, но она также не идеальна. Opera действительно отстой; /

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);    
}

Хорошей новостью является то, что опера перестает разрабатывать собственный движок рендеринга и начинает использовать webkit. Таким образом, ваша проблема со стрелками будет решена автоматически с одним из будущих оперных обновлений. ^^