trabocco sbagliato ritaglio in elemento con border-radius su Opera

Question

Ok, così ho fatto questa FC Barcelona CSS logo e tutto funziona bene sotto:

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

MA su Opera 11 (e anche 12) quelle strisce blaugrana non sono ritagliate. Ho provato molte configurazioni, con e senza wrapper aggiuntivo, ma non ho potuto farlo funzionare.

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> 

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

Ho copiato qui perché c'è un sacco di codice, così forse aiuterà. Sopra ho saltato le classi utilizzate per la decorazione (border_black fill_purple), z-indexing (layer9) e meccanismi javascript (rounded) perché penso che non siano correlati al problema.

Ovviamente tutto è visualizzabile tramite Firebug o altri strumenti di sviluppo su demo site.

Qualche suggerimento?

Answer 1

Non so perché questo è bacato in Opera, ma è possibile utilizzare il gradiente (vedere il codice di seguito). Non funziona in IE (testato con la versione 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

C'è un modo ancora più pulito di usare gradienti:

#blaugrana_stripes_container { 
    background-image: -o-linear-gradient(0deg, #0B2E89 50%, #980F39 50%, #980F39); 
    background-size: 70px 50px; 
} 

Si può solo sbarazzarsi di nulla all'interno #blaugrana_stripes_container.

Il gradiente CSS sopra riportato è compatibile con tutti i browser can be found here.

Codice rubato da Lea Verou.

Answer 3

Opera 12.01 risolve questo problema, tuttavia c'è another bug non correlato a questo argomento. So che questa non è una soluzione, ma volevo renderla più visibile del commento.