Wrong overflow cropping in element with border-radius on Opera

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?

Puccini

1) Unprefixed properties should come after prefixes, not before 2) -o-border-radius does not exist. – Jumpy

Ok, I've corrected it (at the demo site and here), but this is only cosmetic change, it does nothing in this case. – Puccini

FWIW this is not really a good way of doing graphics. All the seams become visible when zooming in (in all the browsers). I'd suggest using SVG for this instead. Anyway, this has been reported as: bugs.opera.com/browse/CORE-35453. – Divulgence

I don't have account on Opera's bugtracker, so I can't view this issue. But thanks to you now I know Opera uses JIRA ;) ps. whole logo thing is not for using, only for fun, so I didn't even think about zooming and so on. – Puccini

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%);

}

Citrine

This is smart solution, but if it's not working on IE it doesn't make sense to change the way of displaying stripes. Now every browser displays logo, only Opera doesn't crop bottom, but I think it's better than no-stripes on IE :) Anyway thanks! – Puccini

But you can mix both using simple conditionals <!--[if IE 9]> <style ..> ... </style> <![endif]--> and with low cost all will be OK:) – Citrine

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.

Bonnett

+1 for Colorzilla, but I am not sure I want to use gradients here. Repeating gradient really is cleaner, but Opera renders it with horizontal lines (even if I use background-size: 70px 244px; instead 50px as you wrote). Cropping works, but I will think about it later, because I'm on vacation now ;) – Puccini

Cropping should work. I was trying to figure out why it didn't, but the dev tools of Opera are not very smooth. Firebug spoiled me. – Bonnett

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.

Puccini