Wrong overflow cropping in element with border-radius on Opera - overflow

Question

Ok, so I've made this FC Barcelona CSS logo and everything works fine under:
Firefox 13
Chrome 20
Safari 5
IE 9
BUT on Opera 11 (and 12 too) those blaugrana stripes are not cropped. I have tried many configurations, with and without additional wrapper, but I couldn't get it work.
HTML:
<div id="blaugrana_stripes_container" class="abs border_black fill_purple cropper layer9 rounded">
<!-- Wrapper needed for some browsers to crop overflow properly -->
<div id="blaugrana_stripes_overflow_cropper" class="rounded">
<div class="blaugrana_stripes fill_purple border_blue"></div>
<div class="blaugrana_stripes fill_purple border_blue"></div>
</div>
</div>
related 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;
}
I've copied it here because there's a lot of code, so maybe it will help. Above I've skipped classes used for decorating (border_black fill_purple), z-indexing (layer9) and javascript mechanisms (rounded) because I think they're not related with problem.
Of course everything is viewable via Firebug or other developer tools on the demo site.
Any suggestions?

Answer 1

I don't know why this is buggy in Opera, but you can use gradient (see code below). It is not working in IE (tested with version 9).
.blaugrana_stripes{display:none;}
#blaugrana_stripes_overflow_cropper{
background: #0b2f89;
background: -moz-linear-gradient(left, #0b2f89 0%, #0b2f89 14%, #980f39 14%, #980f39 28%, #0b2f89 28%, #0b2f89 42%, #980f39 42%, #980f39 57%, #0b2f89 57%, #0b2f89 71%, #980f39 71%, #980f39 86%, #0b2f89 86%, #0b2f89 99%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0b2f89), color-stop(14%,#0b2f89), color-stop(14%,#980f39), color-stop(28%,#980f39), color-stop(28%,#0b2f89), color-stop(42%,#0b2f89), color-stop(42%,#980f39), color-stop(57%,#980f39), color-stop(57%,#0b2f89), color-stop(71%,#0b2f89), color-stop(71%,#980f39), color-stop(86%,#980f39), color-stop(86%,#0b2f89), color-stop(99%,#0b2f89));
background: -webkit-linear-gradient(left, #0b2f89 0%,#0b2f89 14%,#980f39 14%,#980f39 28%,#0b2f89 28%,#0b2f89 42%,#980f39 42%,#980f39 57%,#0b2f89 57%,#0b2f89 71%,#980f39 71%,#980f39 86%,#0b2f89 86%,#0b2f89 99%);
background: -o-linear-gradient(left, #0b2f89 0%,#0b2f89 14%,#980f39 14%,#980f39 28%,#0b2f89 28%,#0b2f89 42%,#980f39 42%,#980f39 57%,#0b2f89 57%,#0b2f89 71%,#980f39 71%,#980f39 86%,#0b2f89 86%,#0b2f89 99%);
background: -ms-linear-gradient(left, #0b2f89 0%,#0b2f89 14%,#980f39 14%,#980f39 28%,#0b2f89 28%,#0b2f89 42%,#980f39 42%,#980f39 57%,#0b2f89 57%,#0b2f89 71%,#980f39 71%,#980f39 86%,#0b2f89 86%,#0b2f89 99%);
background: linear-gradient(to right, #0b2f89 0%,#0b2f89 14%,#980f39 14%,#980f39 28%,#0b2f89 28%,#0b2f89 42%,#980f39 42%,#980f39 57%,#0b2f89 57%,#0b2f89 71%,#980f39 71%,#980f39 86%,#0b2f89 86%,#0b2f89 99%);
}

Answer 2

There's an even cleaner way of using gradients:
#blaugrana_stripes_container {
background-image: -o-linear-gradient(0deg, #0B2E89 50%, #980F39 50%, #980F39);
background-size: 70px 50px;
}
You can just get rid of anything inside #blaugrana_stripes_container.
The above CSS gradient made compatible with all browsers can be found here.
Code stolen from Lea Verou.

Answer 3

Opera 12.01 fixes this issue, however there's another bug not related with this topic. I know this is not a solution, but I wanted to make it more visible than comment.