Stephanie Sullivan Rewis Reporter
	Description • 13 years ago

I've recently encountered some odd rendering issues in FFOX while using outline. In the first example, there are pseudo-elements that are absolutely positioned in their parent div and given negative top, right, bottom and left sides (positioning their sides outside their parent). The outline on the parent div, instead of remaining the proper size with the parent background-color, is going around the entire before and after pseudo-elements. Webkit doesn't separate the background-color and outline and if the outline is changed to border, it remains with the div. The jsFiddle to demonstrate this portion of the bug is here: http://srewis.me/qcD9GE

The second, but similar bug is also related to outline. Both the parent div and the paragraph within have an outline and an RGBa background color. The outline on the div stays outside the outline on the child P and renders a space between the div's outline and background-color on both the left and bottom. Webkit browsers render properly with the outline of the div sitting on top of the outline of the P within (since outline should not be included in the box model). Changing either the div or p from outline to border fixes the rendering in FFOX. Please view this bug demonstrated on this jsFiddle: http://srewis.me/o9IVqa

	philippe (part-time)
	Comment 1 • 13 years ago

Sounds like bug 480888

	David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)
	Comment 3 • 13 years ago

from http://srewis.me/o9IVqa

	Leon Sorokin
	Comment 4 • 13 years ago

i think i just ran across something similar. horizontal 2px mystery spacing between outline and element background. only happens in FF.

http://jsfiddle.net/CZKrY/

is this the same bug?

	Leon Sorokin
	Comment 5 • 13 years ago

filed as Bug 697899 w/ref to this one. feel free to mark as dupe if appropriate.

	David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)
	Comment 6 • 12 years ago

I guess I'm inclined to say this is a feature rather than a bug -- outlines should be drawn around descendant elements.

	Stephanie Sullivan Rewis Reporter
	Comment 7 • 12 years ago

David, I must disagree. I don't see this as a feature at all — on two points: 

On the first demo (with the pseudo-elements), the children are absolutely positioned. I would not expect the outline to go ALL the way around them (the border does not). Notice when I put a double border on the parent (so you can see the color below)—the background moves further out below the whole border: http://jsfiddle.net/stefsull/nSNaR/

Notice also on that demo, that if I remove the position:relative from the parent (there simply to give it position so the children position themselves based on the parent), the outline then moves back to the parent. http://jsfiddle.net/stefsull/YZWJ3/ (And the second problem outlined below occurs.) I would not expect an outline to enclose absolutely positioned children—they are out of the flow and should not affect that.

On the second demo (p element inside div), the issue is that the background color, if no border exists, is not not being painted under the area that would contain the border. However, as shown in this fiddle, if a border is added (again, I used a 4px double border), the background color is painted behind the border (not to the inner edge of the outline). I don't think the outline on the child should be expanding the parent. http://jsfiddle.net/stefsull/eUyJn/ 

No one would expect to put a background-color on an element, and not have it move under the space that the child is creating with THEIR outline (where the parent's border would be if it existed). Outlines tend to be used because they don't add to the box model (yes, I realize we have box-sizing now, but that's a new property and not supported everywhere yet).

If outline is to be treated like box-shadow, in that it does not add to the box model, then I would not expect the outline to go AROUND the box-shadow (example on this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=480888 ). In fact, if I use the spread radius of box-shadow instead of outline, this problem doesn't exist. Firefox draws the box-shadow exactly where I would expect to see the outline—directly outside the border. http://jsfiddle.net/stefsull/5hwWm/2/

If I change both the parent and child to create the look of the border with the spread radius value of box-shadow, creating the same effect as the outline, with the same specifications to start outside the border and not add to the box model, the element is drawn exactly as I would expect—with the child not pushing the parent out and leaving a gap in the background color: http://jsfiddle.net/stefsull/46aVv/1/

No other browser renders outline in this way—and there's no prefix to turn it off in Mozilla.

	David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)
	Comment 8 • 12 years ago

The 'outline' property is designed to render focus outlines; it should behave as an indication of focus ought to behave.  Any other use cases are purely secondary and should only be considered in so far as they do not interfere with drawing optimal focus outlines.

	Stephanie Sullivan Rewis Reporter
	Comment 11 • 10 years ago

Now that https://bugzilla.mozilla.org/show_bug.cgi?id=480888 is fixed, is there any hope we could reconsider rendering this bug and render a focus ring around the parent with pseudo-elements, but let the outline-only stay on the parent (where it was placed)?

	Jean-Yves Perrier [:teoli]
	Comment 13 • 10 years ago

ddn keyword added to update the comment in the outline page if something change in the future. I'm not sure to understand if this is a bug, the correct behavior or a possible behavior (spec underspecified).

	noel.abrahams
	Comment 14 • 9 years ago

This is a bug. Neither Webkit nor IE draw outlines around absolutely positioned child elements. 

This bug is still present as of FF version 39.0.3.

Because there is a simple workaround (outlined here: http://stackoverflow.com/questions/10662902), namely that of using box-shadow instead of outline, there has been no noise around this bug.

It is a significant nuisance to have to work around this. It makes the CSS unintuitive, necessitating comments all over the place.

Please have this fixed.

	Duan Yao
	Comment 15 • 9 years ago

If an element need both outline and box-shadow, the box-shadow workaround on SO can not be used. Currently I set box-shadow on the element and outline on its ::before to workaround this problem, however what if ::before must be used for other purpose? So please fix this issue.

	Karl Dubost💡 :karlcow
	Comment 16 • 8 years ago

Relevant specification 
https://drafts.csswg.org/css-ui/#outline-props

> The stacking of the rendering of these outlines is 
> explicitly left up to implementations to provide 
> a better user experience per platform. This supersedes 
> the stacking of outlines as defined in CSS 2.1.

And

> The rendering of applying transforms to outlines is 
> left explicitly undefined in CSS3-UI.

Example of Web compatibility issue because of outline
https://bugzilla.mozilla.org/show_bug.cgi?id=1214865

	Milan
	Comment 17 • 7 years ago

This bit us pretty hard. We have a large widget set where designers used outline and outline-offset to style controls and we develop a WYSIWYG editor that uses the controls. Everything looked visually correct deployed from the editor (using an embedded chromium instance) to latest Edge and Chrome.

Started testing Firefox more recently and found the outline behavior makes the panels visually unusable (elements with pop-up style components are added as children and the outline stretched around them unexpectedly). Switching to borders doesn't achieve the same effect we can create with outline + outline-offset and also as borders contribute to box model it complicates the WYSIWYG layout (many of the widgets are calculating sizes in JS inconsistently and changing to borders results in subtle misalignment in many places).

	David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)
	Comment 18 • 7 years ago

After bug 480888, I don't think we expand outlines for the *outlines* of descendant elements anymore.  We still do so for their border boxes, which is the right thing to do for focus outlines.

	markus
	Comment 19 • 6 years ago

This is a bug in my opinion. It should behave exactly like in chrome. Please fix it. I recently removed my outline of textfields and textarea elements because of this bug. I expected a behavior like in chrome.

	Yves Goergen
	Comment 20 • 5 years ago

Oh, this bug is even officially listed in the compatibility matrix of the MDN docs page about the outline property (https://developer.mozilla.org/en-US/docs/Web/CSS/outline). Now I've got a problem. I can decide for Firefox or all other browsers. I can compensate for each, but not for both.

Because of this, and since this bug doesn't seem to be fixed anymore, I request an official CSS selector to distinguish Firefox from other browsers. Would that be possible? It's not what spec authors like, but I don't like buggy and incompatible implementations either. Be it a spec or implementation bug, I don't care, there is just no way to render things corectly in all browsers at once.