CODEWITHSUNDEEP
cssoperaoutline
anonymous
anonymous

Reputation: 1539

Opera outline rendering bug?

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?

Upvotes: 9

Views: 3347

Answers (5)

E.R.Rider
E.R.Rider

Reputation: 74

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.

Upvotes: 0

HenkV
HenkV

Reputation: 1

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.

Upvotes: -1

c69
c69

Reputation: 21497

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.

Upvotes: 3

yekta
yekta

Reputation: 3433

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)

Upvotes: 5

webinista
webinista

Reputation: 3764

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

Upvotes: 1

Related Questions