Неправильная обрезка переполнения в элементе с border-radius в Opera

Хорошо, я сделал этот логотип «Барселоны» CSS , и все отлично работает под:

• Firefox 13
• Chrome 20
• Safari 5
• IE 9

НО на Opera 11 (и на 12 тоже) эти полосы блауграны не обрезаются. Я перепробовал множество конфигураций с дополнительной оберткой и без нее, но не смог заставить ее работать.

HTML:

связанный CSS:

#blaugrana_stripes_container, #blaugrana_stripes_overflow_cropper {
    width: 244px;
    height: 244px;
    text-align: left;
    -moz-border-radius: 155px 155px 134px 134px;
    -webkit-border-radius: 155px 155px 134px 134px;
    border-radius: 155px 155px 134px 134px;
}
#blaugrana_stripes_container {
    left: 36px;
    top: 62px;
    border-width: 2px;
    -ms-transform: scaleY(0.79);
    -moz-transform: scaleY(0.79);
    -webkit-transform: scaleY(0.79);
    -o-transform: scaleY(0.79);
    transform: scaleY(0.79);
    z-index: 3;
}
#blaugrana_stripes_overflow_cropper {
    overflow: hidden;
    white-space: nowrap;
}
.blaugrana_stripes {
    height: 100%;
    width: 35px;
    border-width: 0px 35px 0px 35px;
    margin-right: 35px;
    display: inline-block;
}
.cropper {
    overflow: hidden;
    font-size: 0;
    margin: 0px;
    padding: 0px;
    border: none;
}
.abs {
    position: absolute;
}

Я скопировал его здесь, потому что кода много, так что, возможно, это поможет. Выше я пропустил классы, используемые для декорирования (border_black fill_purple), z-indexing (layer9) и механизмов javascript (rounded), потому что я думаю, что они не связаны с проблемой.

Конечно, все можно просмотреть с помощью Firebug или других инструментов разработчика на демонстрационном сайте .

Есть предложения?