absolute/relative div inside absolute-positioned parent div pushes outlines out

RESOLVED INVALID

Status

()

Core
Layout: Block and Inline
RESOLVED INVALID
3 years ago
3 years ago

People

(Reporter: blackcat, Unassigned)

Tracking

({testcase})

36 Branch
x86_64
Windows 8.1
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

3 years ago
Created attachment 8583994 [details]
Capture.PNG

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36

Steps to reproduce:

* 1 parent absolute-positioned div
* 1 child relative-positioned div
* 1 child absolute-positioned div

Try moving one of the red/green divs up or down against one of the borders. Instead of the red/green overlaying....they start pushing the border out. Please see the fiddle below

https://jsfiddle.net/t0pe2fde/5/


Actual results:

Firefox is not allowing an absolute/relative positioned div overlay an absolute-positioned parent 


Expected results:

The red/green divs must start overlaying the border, not pushing it out. This behavior is confirmed in Chrome An IE,

Updated

3 years ago
Component: Untriaged → Layout: Block and Inline
Keywords: testcase
Product: Firefox → Core
The black thing in the testcase is an outline, not a border.  Outlines are drawn around the overflow area of the box, not the box itself.  If you actually use borders in your testcase, you will see the behavior you want.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → INVALID
Summary: absolute/relative div inside absolute-positioned parent div pushes borders out → absolute/relative div inside absolute-positioned parent div pushes outlines out
(Reporter)

Comment 2

3 years ago
Ok, sorry I expressed myself badly. That doesn't change the fact that Firefox behaves badly in this case, and this is a bug. An absolute positioned DIV should not cause the parent to resize, and should go over the outline without problems.... Please compare with the behavior of other browsers to see that this is in fact a bug.....
The parent is not resizing.  You can see what the size of the parent is by putting a background on it.

CSS 2.1 says that outlines should be used for indicating focus.

The CSS 3 UI draft explicitly says:

  User agents should use an algorithm for determining the outline that encloses a region
  appropriate for conveying the concept of focus to the user.

OK, so what does a focus outline look like?  Try https://jsfiddle.net/t0pe2fde/6/ and then click in the display are and hit tab to focus the outer div.  The focus outline you see should match what the CSS outline looks like in a browser implementing outlines correctly.  If the two don't match, the browser is buggy.

> Please compare with the behavior of other browsers

The other browsers are very much buggy here, sorry.  The spec for outlines is pretty clear and they're just not following it at all.
(Reporter)

Comment 4

3 years ago
I'm sorry, but is still disagree... Because if you take into consideration how absolute positioned elements should behave...the absolute div should start overlaying...
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Does the spec say that outlines act differently than all other elements when it comes to absolute/relatively positioned elements? I have never seen an absolute-positioned element push out another element like that....

Quote (https://developer.mozilla.org/en-US/docs/Web/CSS/):
Outlines differ from borders in the following ways:
*   Outlines do not take up space, they are drawn above the content.

If the outline is drawn above the content....and the div pushes the outline away from the content....according to your own spec...this is clearly a bug.....
(Reporter)

Comment 5

3 years ago
...And before you say that the absolute-positioned div is part of the parent's content, according to the spec, absolute-positioned-elements are taken out of the "normal flow" of a page, and should not take up any space...:

"Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. "

....therefore that argument would be invalid...
> Does the spec say that outlines act differently than all other elements

You mean than borders?  Yes, it does.

> *   Outlines do not take up space, they are drawn above the content.

Yes, that's not the same thing as whether outline positions are affected by the content.  The point is that adding an outline does not change where any boxes are placed: they're a paint-time effect, not a layout effect.  But adding or moving boxes definitely changes where outlines are drawn.
(Reporter)

Comment 7

3 years ago
1. It looks like you're completely twisting what I am saying just to fit your argument. Whether i mean borders or not, the result should be the same. The immediate difference between an outline and a border is that a border takes space whereas the outline does not (per your own spec). The both encase the content of the element, and should behave as such.

2. You are interpreting the definition of 'outline' to fit your scenario. Why not call it a loose-outline? Since apparently according to you it can be drawn anywhere on the page....as long as it's there....because that makes complete sense.

3. You are completely ignoring absolutely-positioned elements and the fact that in this case it interacting with the outline by pushing it out. Which should never happen in this case...per your own spec. 

4. Why have a spec if you're just going to ignore it? :)
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
> The immediate difference between an outline and a border is that a border takes space
> whereas the outline does not

And that an outline is supposed to enclose the area a focus indicator would enclose.  The spec is really clear about that.

Did you try to look at what focus outlines look like in my testcase?  They enclose the absolutely positioned content in browsers.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago3 years ago
Resolution: --- → INVALID
(Reporter)

Comment 9

3 years ago
Could you please point me to your test case as well as the spec where you got this from (I sent you clear excerpts). 
Also, you haven't accounted for the break from the spec when it comes to the absolute-positioned element. It is clearly stated that absolute means out of the document flow (word for word). Other browsers are clearly respecting that rule while you are breaking it in my test case (not the other way as you are implying).

https://developer.mozilla.org/en-US/docs/Web/CSS/position
"In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements."

Thanks!
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
> Could you please point me to your test case

I already did; see comment 3.

> as well as the spec where you got this from

<http://www.w3.org/TR/css3-ui/#outline> and <http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines>.  Again, I mentioned all this in comment 3 (with spec quotes, not links).

> you haven't accounted for the break from the spec when it comes to the
> absolute-positioned element.

There is no break from the spec.  Abs pos elements don't affect layout of their ancestors (mostly; it's not quite true).  But outlines are not part of layout at all.  They're not "elements", in particular, in terms of your quote from developer.mozilla.org.

If you think outlines should work differently, the right forum for that is probably www-style@w3.org, not here; we really are just implementing what the spec says.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago3 years ago
Resolution: --- → INVALID
(Reporter)

Comment 11

3 years ago
Sorry I missed that. 
I agree with you on what an 'area of focus' should mean and that is the guidelines that were provided in the CSS specification.

But that still leaves out for interpretation where absolutely-positioned elements stand in relation to an 'area of focus', and obviously Mozilla's interpretation is different from other implementation of the same concept. You say that an outline is not an element, you're right, it's a property (https://developer.mozilla.org/en-US/docs/Web/CSS/outline). So despite it being a property, why do you allow it to take on its own life and detach from the behavior of the element it encases?

Let me ask you this: If I have a container in the middle of the screen with two absolute-positioned children, one positioned in the upper right corner of the screen, and the other in the bottom left corner of the screen, that element's area of focus would become the entire screen. That still sounds confusing...and still in conflict with the specification for absolute positioning and outline itself (outlines the content of an element, yet still keeps track of elements that are taken out of the flow of the document and the element itself...)...

Thanks!
> But that still leaves out for interpretation where absolutely-positioned elements stand
> in relation to an 'area of focus'

Indeed.  The only requirement in the spec is that the browser be consistent about this.

> and obviously Mozilla's interpretation is different from other implementation

While true, that doesn't necessarily change things that much.  For example, what I see on my testcase in Chrome is two separate rectangles of focus outline, and in particular one of those rectangles encloses the red div.

Alos, try https://jsfiddle.net/t0pe2fde/9/ in Chrome and see what the focus outline looks like...

> and detach from the behavior of the element it encases

Because what the focus outline encloses is not just the element itself but also overflowing descendants.  At least that's what it does in practice in web browsers.

> that element's area of focus would become the entire screen

Or three separate rectangles.  Nothing requires the area of focus to be a single rectangle, and the CSS specs are pretty clear on this for CSS outlines too.  From CSS2.1:

  Outlines may be non-rectangular. For example, if the element is broken across several
  lines, the outline is the minimum outline that encloses all the element's boxes

and CSS3 box has similar language.

But you're right that the spec doesn't require anything in particular here, not least because platform conventions for focus indicators might differ.  The only requirement is that outlines and focus indicators should have the same behavior.
(Reporter)

Comment 13

3 years ago
Alright... I guess we'll have to agree to disagree here unfortunately :).

Thank you for the time you took to explain what an outline does, I did start off with the wrong premise, and I do feel that I have a better understanding now of what an outline is.

HOWEVER, as a developer ...I would expect the browser to respect my right to choose the positioning of an element, and respect the nuances of what every type of positioning means..... That assumes that when I say "position:absolute", I am making a conscious and informed decision to snap that element out (of the document flow), and it's no longer an "overflow" case. At least that's how (strongly) feel about absolute-positioning....and it is different from "overflowing" (for me).

While I see this(your) behavior is valid for all other position types, your implementation really fails to make a difference between absolute and relative (in this case - outlines)...and they are and should be inherently different.

Thanks again!
-C
You're welcome.  That said, I think your expectation about how overflow and positioning interact is just wrong per spec.  Try https://jsfiddle.net/t0pe2fde/10/ and compare how it renders to https://jsfiddle.net/t0pe2fde/9/ -- the overflow property on the parent certainly changes how the child is rendered.

Or for extra fun, compare the rendering of https://jsfiddle.net/t0pe2fde/16/ and https://jsfiddle.net/t0pe2fde/15/ -- here the abs pos child causes scrollbars to appear on the parent.
(Reporter)

Comment 15

3 years ago
Again...agree to disagree. The spec is not clear on this matter, and it is a matter of interpretation. Implementing outlines in conjunction with positioning would require reconciling both properties :). Some browsers chose to, some don't/won't.

http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines
You need to log in before you can comment on or make changes to this bug.