outlines are drawn outside (expanded by) outlines on descendant elements

NEW
Unassigned

Status

()

Core
Layout
6 years ago
2 months ago

People

(Reporter: Stephanie Sullivan Rewis, Unassigned)

Tracking

(Blocks: 1 bug, {dev-doc-needed})

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

6 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

Comment 1

6 years ago
Sounds like bug 480888
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Created attachment 560812 [details]
first testcase
Created attachment 560813 [details]
second testcase

from http://srewis.me/o9IVqa

Updated

6 years ago
Depends on: 480888

Comment 4

6 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?

Comment 5

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

Updated

6 years ago
Blocks: 697899
Summary: outline does not remain with element or has space between outline and background-color → outlines are drawn outside (expanded by) outlines on descendant elements
Status: UNCONFIRMED → NEW
Ever confirmed: true
I guess I'm inclined to say this is a feature rather than a bug -- outlines should be drawn around descendant elements.
(Reporter)

Comment 7

6 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.
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.
No longer blocks: 697899
Duplicate of this bug: 418912
Duplicate of this bug: 772753
(Reporter)

Comment 11

3 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)?

Updated

3 years ago
Duplicate of this bug: 1070685
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).
Keywords: dev-doc-needed

Comment 14

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

Comment 15

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

Updated

a year ago
Blocks: 1214865
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
You need to log in before you can comment on or make changes to this bug.