CODEWITHSUNDEEP
cssfirefoxwebkitgecko
Elie
Elie

Reputation: 7363

CSS "outline" different behavior behavior on Webkit & Gecko

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:

Webkit Screenshot

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

Upvotes: 36

Views: 7055

Answers (3)

Samuele Marazzita
Samuele Marazzita

Reputation: 1

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>

Upvotes: 0

Rumpleteaser
Rumpleteaser

Reputation: 4234

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;

Upvotes: 33

BoltClock
BoltClock

Reputation: 723648

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.

Upvotes: 17

Related Questions