Opera outline rendering bug?

Question

Does anyone know something more about Opera outline bug?

Check this out:

http://jsfiddle.net/BYgMr/

<div id="outline">TEST</div>
<div id="another-div">Another div</div>

#outline {
    border: solid 1px #000;
    outline: solid 1px red;
    background-color: #fff;
    width: 200px;
    height: 200px;
}

#another-div {
    position: absolute;
    top: 100px;
    left: 100px;
    border: solid 1px #000;
    outline: solid 1px blue;
    background-color: #eee;
    width: 200px;
    height: 200px;
    z-index: 5000; /* even this is not helping */
}

I'm using the latest Opera, I've checked on TWO different machines with different Opera versions all of them render it like:

What's THAT? In any FF/Safari/Chrome the outline goes below grey area, but in Opera it's still above (even if div parent is way below!).

Google search gives only "Opera 9.5+ CSS bug: rendering outline over absolute positioned" link, but it doesn't want to open.

Any temporary fixes? Or maybe I'm blind and made a horrible mistake somewhere?

Answer 1

This is more of a missing spec in Opera rather than a bug. A bug constitutes something not working according to specifications and Opera is following W3 standards according to step 10 - http://www.w3.org/TR/CSS21/zindex.html)

It is a missing spec in Opera because there's no way to set a style above the last block drawn namely an "outline".

Its probably in our best interest not to use an outline when we could use border or box-shadow but I can't do that in my case since I've got a tooltip which thousands of people load independently onto their sites. And I don't have the luxury of changing everybody's template styling nor would I ever want to.

I've submitted a bug report to Opera (DSK-339836). Hopefully they'll give us a way to draw something above the last thing drawn (ie. outline)

Answer 2

This is not a bug!

http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines

The outline created with the outline properties is drawn "over" a box, i.e., the outline is always on top, and does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow.

Outline is not supposed to be "just another border" property. Its more needed for debug, or creating visual UI hints, around certain elements.

Answer 3

It's not a "bug," per se, but a difference in how the spec was implemented. The outline highlights the edges of the box. That's it. It isn't supposed to be used as a border. If you look closely, you'll see that only the red outline overlaps the other box, but the dark border does not.

Is there a reason you're using a border and an outline and overlapping divs? That seems like an odd use case. If you need to use both, you can use box-shadow as a bit of a hack to get the effect you want in most recent browsers: box-shadow: 0px 0px 0px 1px red;.