Skip to content

[cssom-view] Algorithm of Element.offsetParent #409

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
upsuper opened this issue Aug 16, 2016 · 15 comments
Closed

[cssom-view] Algorithm of Element.offsetParent #409

upsuper opened this issue Aug 16, 2016 · 15 comments
Labels
cssom-view-1

Comments

@upsuper
Copy link
Member

upsuper commented Aug 16, 2016

The current spec says offsetParent should return an ancestor if

The computed value of the position property is not static.

It doesn't seem to me it is quite useful to query an ancestor who has some specific position value. Isn't it supposed to return the first ancestor which is a containing block of absolutely-positioned descendants?
@upsuper
Copy link
Member Author

upsuper commented Aug 16, 2016

cc @zcorpan

@zcorpan
Copy link
Member

zcorpan commented Aug 16, 2016

Do browsers do something differently for this?

@upsuper
Copy link
Member Author

upsuper commented Aug 16, 2016

Firefox currently returns the containing block of absolutely-positioned descendant, Chrome seems to follow what the spec says.

@zcorpan
Copy link
Member

zcorpan commented Aug 16, 2016

Thanks. Do you have a test case at hand so we can also check WebKit and Edge?

@upsuper
Copy link
Member Author

upsuper commented Aug 16, 2016

No at this moment, but I can create one later today if needed.

@zcorpan
Copy link
Member

zcorpan commented Aug 16, 2016

Per the definition at https://drafts.csswg.org/css-position/#containing-block "the containing block is established by the nearest ancestor with a position other than static" (or ICB, in which case offsetParent returns body). So that aspect is the same, or am I missing something?

@upsuper
Copy link
Member Author

upsuper commented Aug 16, 2016

transform with value other than none also creates a containing block, so does will-change with value position or transform.

Actually, I'd argue that a fixed-positioned element caught by an ancestor with transform should also has non-null offsetParent.

@upsuper
Copy link
Member Author

upsuper commented Aug 16, 2016 •
edited
Loading

This is a testcase with which we can compare behavior of different engines: https://bugzilla.mozilla.org/attachment.cgi?id=8781553

It seems WebKit always returns <body> which is useless anyway. Blink returns #outer only when position: something. Gecko returns #outer for all cases which create a containing block.

@upsuper
Copy link
Member Author

upsuper commented Aug 16, 2016

And Edge always returns <body> like WebKit.

@zcorpan
Copy link
Member

zcorpan commented Aug 17, 2016

I discussed this with @rune-opera and @mstensho-opera and they said they think the Gecko behavior makes most sense. I tend to agree. We can make the spec say "first ancestor which is a containing block of absolutely-positioned descendants" instead. But would be good to hear from WebKit and Edge people also. @hober, @atanassov ?

@smfr
Copy link
Contributor

smfr commented Aug 24, 2016

WebKit's code is here: https://trac.webkit.org/browser/trunk/Source/WebCore/rendering/RenderObject.cpp#L1869
We walk the parent chain looking for things that are positioned, with special casing for tables and things with zoom.

@upsuper
Copy link
Member Author

upsuper commented Aug 24, 2016

@smfr Looking at the code, I think it should mostly match Blink's behavior. Not sure why the testcase shows something different... Anyway, what do you think about the proposal of changing the algorithm here?

@FremyCompany
Copy link
Contributor

FremyCompany commented Aug 24, 2016 •
edited
Loading

Sorry, I retract what I just said, the test case isn't working properly for us because we do not support setting the style property as a string, we just don't throw when you do it but it has no effect. In addition, we do not support will-change.

Here is what we actually return for cases we support:

/* empty */
body

position: relative
outer

transform: translate(0)
outer

https://jsfiddle.net/nqgL7L2e/

@kojiishi
Copy link
Contributor

Blink code here, FYI.

@astearns astearns removed the Agenda+ label Sep 6, 2016
@zcorpan zcorpan closed this as completed in 180b348 Sep 9, 2016
@zcorpan
Copy link
Member

zcorpan commented Sep 9, 2016

Filed bugs:
https://bugs.webkit.org/show_bug.cgi?id=161788
https://bugs.chromium.org/p/chromium/issues/detail?id=645397

This was referenced Dec 31, 2016
Closed
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
cssom-view-1
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@smfr @zcorpan @upsuper @FremyCompany @kojiishi @astearns