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

ok, i've made fc barcelona css logo , works fine under:

• firefox 13
• chrome 20
• safari 5
• ie 9

but on opera 11 (and 12 too) blaugrana stripes not cropped. have tried many configurations, , without additional wrapper, couldn't work.

html:

<div id="blaugrana_stripes_container" class="abs border_black fill_purple cropper layer9 rounded"> <!-- wrapper needed browsers crop overflow --> <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 here because there's lot of code, maybe help. above i've skipped classes used decorating (border_black fill_purple), z-indexing (layer9) , javascript mechanisms (rounded) because think they're not related problem.

of course viewable via firebug or other developer tools on demo site.

any suggestions?

i don't know why buggy in opera, can use gradient (see code below). not working in ie (tested 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%); }