For this inquiry, with the approval of the staff and community, I would like to address two separate bugs that occur in different browsers under similar conditions.
The bugs manifest when an element with display:inline (and a box-shadow, although this is primarily for demonstration purposes) has an opacity less than 1. In these cases:
- IE 10 (at least) cuts off the box-shadow as if "overflow:hidden" was applied.
- Opera 12.15 only displays the box shadow on the first line of text.
To showcase the issue, here is the HTML snippet:
<span class="inline opaque">
<span>Some text.</span>
</span>
CSS styles:
.inline{
display:inline;
background:red;
box-shadow:0 0 0 10px red;
}
.inline.opaque{
opacity:.5;
}
View a live example. It's quite frustrating dealing with this issue. It seems very odd and unfamiliar to me. Any assistance would be highly appreciated.
Thank you!
UPDATE: I think I have found a workaround for IE. It appears that we can adjust the box-shadow by moving it to the left and top (the directions where cropping does not occur). To visually maintain the same space occupied by the element, we can utilize transform. You can see it more clearly 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;
}
}
Keep in mind that we may also need to shift (potentially with translate) the contents of .inline.