IE10, Opera 12 :: Opacity:<1, display:inline leads to a strange cropping

Question

In this question - If the staff and community won't mind - I would like to address two different bugs of different browsers, though ocuring on same conditions.

The bugs happen when an element with display:inline (and a box-shadow, but this is set here more for a demonstration purpose) gets opacity less than 1. Then

1. IE 10 (at least) chops the box-shadow as if "overflow:hidden" was set.
2. Opera 12.15 leaves the box shadow only on the first line of the text.

The HTML to demonstrate the issue:

<span class="inline opaque">
    <span>Some text.</span>
</span>

CSS:

.inline{
    display:inline;
    background:red;
    box-shadow:0 0 0 10px red;
}
.inline.opaque{
    opacity:.5;
}

A live example. I am really frustrated with this happening. Seems very strange and unnatural for me. Would be very grateful for any help.

Thanks!

---

UPDATE. Seems I have found some workaround for IE. It turns out, that we can shift the box-shadow to the left and top (the directions it doesn't crop in this bug). And to make the element visually occupy the same space, a transform can be applied. It's better visible here

@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){
    .block{
        -ms-transform:translate(5px, 5px);
        transform:translate(5px, 5px);
    }
    .inline{
        box-shadow:-5px -5px 0 5px #c0c;
    }
}

Note, that we need to shift (possibly with translate) the contents of .inline as well.

Develop

I couldn't help but notice the irony in naming your opacity:.5 rule .opaque. – Tigerish

Working fine at my end... are you by any chance in compatibility mode of IE... – Gnosticize

Thou i can see the cropping issue on Firefox - but that cuz of box shadow -- try removing box shadow... i think coping issues persist cuz of box shadow on inline element nothing to do with opacity. – Gnosticize

@Tigerish , some irony =) – Develop

@Imran Bughio: I'm pretty sure that's not what he's referring to. – Tigerish

@ImranBughio, no, the browser is working in its native mode. If you mean the text being cropped - it is, but it's not the problem in question. (... yet, it might be considered a bug as well: remove the opacity and the text will get visible) – Develop

I understand the problem now.. -- seems like a rendering bug in IE -- CHECK THIS similar question – Gnosticize

@ImranBughio, thanks, but I don't think it's relevant: the browser version is much older. – Develop

There are a lot of weird things going on here. May I ask what exactly you want to accomplish? I can get Chrome, FF, and IE to appear all the same (they don't aren't even close in your original example), but I'm not sure what you want. – Excavation

@AndyM, originally I wanted a workaround to the behavior described in the question - for the text and its BG to look like in all other browsers as they supposedly should. Or an explaination: sometimes the majority of the browsers behave in one way, one or two stand out; we think that the latter one(s) is(are) buggy, but it turns out that it is them who stick to the standards, not the majority. I have found the workaround for IE (sorry to have layed out the update not clearly). But maybe somebody offers something else, and a solution for Opera. – Develop

Answer 1

Each line of a display:inline element is implicitly a container. You can see evidence of this if you were to apply border:1px solid black to your text.

Therefore, it's not unreasonable for the browser to render each shadow separately, and that (unfortunately) means placing them on top of elements (read: lines) before it.

As for why the "cropping" manifests only in certain browsers, and only when opacity is less than 1... that's not really something I can answer because it is down to browser implementation. That said... from my understanding, the cropping is technically correct.

Anyway, the "easy" fix is to just apply the opacity to a parent element, like so.

Unbreathed

placing them on top of elements (read: lines) before it Sorry, the problem is not in this. Overlapping text by the shadow of the succeeding lines is the reason of three elements used in the second code sample from the question codepen.io/bonflash/pen/zeyum . just apply the opacity to a parent element this does help, but, unfortunately, only partially and only for the Opera case (in combination with box-shadow shift). Anyway, thank you for pointing this in an answer, for a description (I know what the line and inline boxes are, but for - the whole picture), and for your time! – Develop