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.

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.