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

Answer 1

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;