ошибка border-radius в Opera

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

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

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

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

Я: 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;

странно. Очень. Странный.

EDIT 2:

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

4 ответов


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

Как насчет 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;
  }

это действительно очень забавные артефакты;) вы используете css-трюк с 0 измерениями и границей, заполняющей все пространство. Только это вызывает проблемы в сочетании с радиусом границы. Border-radius сам по себе отлично работает в opera в большинстве сценариев, даже с очень толстой границей Скрипка-Пример а также в случаях с 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);    
}

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


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