CSS "outline" different behavior behavior on Webkit & Gecko

Question

I'm working on an experiment & I found out that the "outline" CSS2 property is not implemented the same way on Webkit & Gecko

In the script below, I have a absolute position div inside another div but floating outside of it. The outline on Webkit outlines the actual parent div while on Gecko, it expands to cover the child item.

http://jsfiddle.net/KrCs4/

Am I missing anything? Is there a property that I need to overwrite on Gecko? or it should be reported as a bug?

Webkit Screenshot:

Firefox Screenshot:

EDIT:

It's confirmed to be a bug and here's a workaround: http://jsfiddle.net/7Vfee/ (You need to make sure that the parent is positioned: relative or absolute for this workaround to work.

Diplostemonous

ugh no idea , i tried different method – Otolaryngology

Firefox Bug: bugzilla.mozilla.org/show_bug.cgi?id=687311 – Pathogenic

Answer 1

This inconsistent behavior of Gecko is well-known and quite adequately documented, although strangely not at MDN but at the SitePoint Reference:

Firefox up to and including version 3.5 will draw the outline outline around the content of an element that has overflowed its boundaries rather than around the element’s actual set dimensions.

This continues to affect all versions of Firefox. I don't see a viable workaround for it at the moment, other than to remove your absolutely-positioned div from its parent and place it relative to... something else.

Pegram

Why does SitePoint has more documentation than the official W3C spec? w3.org/TR/CSS2/ui.html#dynamic-outlines – Cuddle

@Xavier Ho: SitePoint focuses on browser compatibility and behaviors. It's not the job of the spec to define implementation details. – Pegram

It is W3C's job to define browser behaviour, regardless of the implementation. As far as I can tell, outline isn't very well defined when it comes to size. – Cuddle

Oh, that's what you were referring to. Yes, indeed, it's not specified in there... hence calling it "inconsistent behavior" and not an outright "bug". – Pegram

Thanks for pointing that out. The bug can be found here: bugzilla.mozilla.org/show_bug.cgi?id=480888 and I updated my question with a workaround. – Diplostemonous

Yes, and there are many places in the W3C pages where it says the spec is not 100% unambiguous and the browsers may differ in how they implement it. I don't feel you should call it bugs; you should call it the browsers' unique personalities! – Isotherm

Answer 2

I had the same issue, so I swapped it from using outline to use a box-shadow:

box-shadow: 0px 0px 0px 1px #FFF;

instead of

outline:1px #dcdcdc solid;

Shawanda

Later comment, but I wanted to add that Firefox will also draw an outline around any :after content added in the CSS. Using box-shadow as above will solve the problem. In fact, the only reason I can think of for actually using outline for anything would be IE8 support--apparently it can do outline but not box-shadow. – Mclaughlin

@Mclaughlin Another reason to use outline is because it provides a way to add an offset. – Substrate

Answer 3

I've fixed using this instead absolute positioning:

transform: translate(x,y);

.outer {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 50px;
    width: 100px;
    background: blue;
    border: 3px solid green;
    outline: 3px dotted red;
}
.inner {
    position: absolute;
    transform: translate(80px, 15px);
    width: 40px;
    height: 20px;
    background: yellow;
}

<div class="outer">
    <div class="inner">
    </div>
</div>

Baresark