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?

Ohl

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)

Kootenay

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.

Prewitt

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;.

Unawares

It doesn't make sense to highlight the box if it can't be seen. – Tentage

Actually it does if you're, say, building a debugger and need to understand what's happening with the layout. The point of highlighting isn't to add a border though. We have outline and border for that. Highlight is merely to call attention to the box. Which is why I am asking why the OP is using both. – Unawares

What I mean is, your post says "[How opera implements outline] is not a bug", and that it's ok to outline an element even if that element can't be seen. I've read more about this issue including why Opera implemented outlines this way and I still say it doesn't make sense. I don't think CSS properties such as outline should only be used for debugging, and I can't imagine a real use-case where "outlines always on top" makes even a tiny bit of sense. As for using border AND outline together, there are lots of reasons why you might want that. I used to use it until I encountered this bug. – Tentage

One use-case: if you have a block element which you feel would look good with a border that is outset by a certain number of pixels; you can make the border as the gap and the outline as the border. – Tentage

The debugger was a sample use case. That's not the only one, obviously. Your use case still isn't how outline is supposed to be used. – Unawares

Again: it's not a bug. It's an implementation difference. Whether it's a valid one is a matter of opinion. In either case: using the box-shadow technique will work as you want it to in every browser. – Unawares

@webinista: You can call it a "difference", I'll continue to call it a bug. They changed the behaviour to be different than all the other browsers, for no good reason, making this feature nearly useless on opera. Just like the old HTML spec didn't say it was wrong for select elements to appear above positioned content (because select was a replaced element), the fact that the current spec doesn't say that it's wrong for outlines to be on top of everything doesn't make Opera less wrong for doing that. It's asinine, pure and simple. – Tentage

@webinista... Opera doesn't seem to respect z-index assigned for the "another-div" (the outline ignores that). That means its a spec violation. I've submitted a bug report to Opera. – Kootenay

In amendment: See my response, its not a spec violation but a missing spec. – Kootenay

Answer 4

First: I see a lot of talk and no intelligent answers.

Second: the outline property in opera seems to have a positive Z-Index and stays on top of all other Z-Indexes.

Third: I came looking for a fix or a deal with it, but instead got rubbish and opinions, and we all know what opinions are like.

I see this as a browser code issue that separates the outline from the element and gives it a positive Z-Index above everything else. All other browsers I have tried work fine including mobile browsers, except Opera. I was once fond of Opera as a mobile browser but am now seeing more draw backs than anything else.

The only fix I see at this point is a browser ID script that removes the outline property for the Opera browser.

Pompous

Answer 5

Yes, it is a bug!

CSS 2.1 outlines differ from borders in the following ways: Outlines do not take up space. Outlines may be non-rectangular.

So nowhere it states that outlines should be on top of other boxes. Borders don't do that! That the outline is drawn above its own box is allright but thats it. Another box above with a higher z-index and it should not be visible.

I can not even nicely show a floating popup window over a div with an outline, it shines through! This is simply wrong. No other browser does it like this.

Lianneliao

Nowhere does it state that outlines shouldn't be on top of boxes either. Just because a browser does something differently doesn't necessarily mean it's buggy. – Essex