desbordamiento incorrecto recorte en el elemento con la frontera de radio sobre el Opera

Question

Ok, así que he hecho este FC Barcelona CSS logo y todo funciona bien bajo:

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

PERO en Opera 11 (y 12 también) las rayas blaugrana no se recortan. He probado muchas configuraciones, con y sin envoltorio adicional, pero no pude hacer que funcione.

HTML: CSS

<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> 

relacionados:

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

he copiado aquí porque hay una gran cantidad de código, así que tal vez ayudará. Arriba He omitido las clases utilizadas para decorar (border_black fill_purple), z-indexing (layer9) y mecanismos de JavaScript (rounded) porque creo que no están relacionadas con el problema.

Por supuesto, todo se puede ver a través de Firebug u otras herramientas de desarrollador en el demo site.

¿Alguna sugerencia?

Answer 1

No sé por qué esto tiene errores en Opera, pero puede usar degradado (vea el código a continuación). No funciona en IE (probado con la versión 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

Hay una manera aún más limpio de la utilización de gradientes:

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

Sólo puede deshacerse de cualquier cosa dentro #blaugrana_stripes_container.

El degradado CSS anterior hace compatible con todos los navegadores can be found here.

Código robado de Lea Verou.

Answer 3

Opera 12.01 soluciona este problema, sin embargo, hay another bug no relacionado con este tema. Sé que esto no es una solución, pero quería hacerlo más visible que comentar.