Skip to content
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

html element offset does accounting margins contrary to docs #4863

Open
aharonach opened this issue Mar 22, 2021 · 4 comments
Open

html element offset does accounting margins contrary to docs #4863

aharonach opened this issue Mar 22, 2021 · 4 comments
Labels
Behavior Change Blocker Offset
Milestone
5.0.0

Comments

@aharonach
Copy link

aharonach commented Mar 22, 2021 •
edited

Description

Hi,
This is regarding the latest jQuery version (3.x).

When running $('html').offset() when the element has a margin-top or margin-left, the values are equals to those margins.
On old versions of jQuery, I always get zero for top and left values which are the expected values. It's also mentioned in the docs, as said: "Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for margins set on the document element." )

See JSBin below.

Use case example is Select2 library which calculates the dropdown position based on the <html> element. Those wrong values of offset() output cause the dropdown to be placed incorrectly. See this issue from WordPress support forum.

Link to test case

jQuery 3: https://jsbin.com/dixilusupe/edit?html,css,js,output
jQuery 1: https://jsbin.com/vadudamufa/edit?html,css,js,output
@aharonach aharonach mentioned this issue Mar 22, 2021
Closed
5 tasks
@mgol mgol added the Discuss in Meeting Reserved for Issues and PRs that anyone would like to discuss in the weekly meeting. label Mar 22, 2021
@gibson042
Copy link
Member

gibson042 commented Mar 22, 2021 •
edited

Background information:

  • .offset() is documented to return coordinates "relative to the document", but doesn't define exactly what that means other than by an oblique "positioning a new element on top of an existing one for global manipulation" hint.
  • A document doesn't really have CSS layout, but its singular document element (e.g., <html>) does.
  • A document element can have arbitrary content (but especially for environments using jQuery, usually contains only a <body> ).
  • The content positioning origin of the document element is inside its margin and padding border if and only if it establishes an absolute positioning containing block (i.e., its positioning scheme is not 'static'), and is otherwise the origin of the initial containing block of the document itself: https://jsfiddle.net/584qL06e/

Whether or not the document element establishes an absolute positioning containing block, I believe that the origin identified above (subject to the positioning scheme of the document element) is the most useful origin for .offset().

@timmywil timmywil removed the Discuss in Meeting Reserved for Issues and PRs that anyone would like to discuss in the weekly meeting. label Apr 12, 2021
@timmywil
Copy link
Member

I also lean towards using the document element and make it conditional on absolute position.

@timmywil
Copy link
Member

I'm still not sure whether it's a breaking change. You could read the existing docs in different ways. If you read it as relative to the document element (which makes more sense to me as it's concrete), then this is a bug fix.

@timmywil timmywil added the Discuss in Meeting Reserved for Issues and PRs that anyone would like to discuss in the weekly meeting. label Apr 12, 2021
@timmywil
Copy link
Member

Discussed in the meeting. Because it's been this way for so long, we'll treat it as a breaking change for 4.0.

@timmywil timmywil removed the Discuss in Meeting Reserved for Issues and PRs that anyone would like to discuss in the weekly meeting. label Apr 12, 2021
@timmywil timmywil added this to the 4.0.0 milestone Apr 12, 2021
@snyk-bot snyk-bot mentioned this issue May 20, 2021
Closed
@timmywil timmywil modified the milestones: 4.0.0, 5.0.0 Aug 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Behavior Change Blocker Offset
Milestone
5.0.0
Development

No branches or pull requests
4 participants
@timmywil @gibson042 @mgol @aharonach