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

Avoid counting scroll twice in offset #5468

Open
mgol opened this issue Apr 8, 2024 · 1 comment
Open

Avoid counting scroll twice in offset #5468

mgol opened this issue Apr 8, 2024 · 1 comment
Labels
Discuss in Meeting Reserved for Issues and PRs that anyone would like to discuss in the weekly meeting. Offset
Milestone
4.0.0

Comments

@mgol
Copy link
Member

mgol commented Apr 8, 2024 •
edited

While we're here making changes, we could also account for scrolling.

-				// Incorporate borders into its offset, since they are outside its content origin
+				// The origin against which we will be returning a relative position is the absolute offset
+				// of offsetParent, plus the top/left width of its borders (since they are outside offsetParent's
+				// content origin), minus its top/left scroll position (which has already affected element
+				// absolute offset and should not be counted twice)
 				parentOffset = jQuery( offsetParent ).offset();
-				parentOffset.top += > jQuery.css( offsetParent, "borderTopWidth", true );
-				parentOffset.left > += jQuery.css( offsetParent, "borderLeftWidth", true );
+				parentOffset.top += jQuery.css( offsetParent, "borderTopWidth", true ) - offsetParent.scrollTop;
+				parentOffset.left += jQuery.css( offsetParent, "borderLeftWidth", true ) - offsetParent.scrollLeft;

Originally posted by @gibson042 in #4861 (comment)
@mgol mgol mentioned this issue Apr 8, 2024
Merged
4 tasks
@mgol mgol added the Offset label Apr 8, 2024
@mgol mgol added this to the 4.0.0 milestone Apr 8, 2024
@jquery jquery deleted a comment from Milobut May 15, 2024
@mgol mgol added the Discuss in Meeting Reserved for Issues and PRs that anyone would like to discuss in the weekly meeting. label Jun 4, 2024
@mgol
Copy link
Member Author

mgol commented Jun 4, 2024

I tried the suggestion above locally; it generates 7 test (19 assertions) failures:

Test failures 
7 tests failed.

1. offset: nonzero box properties - html.relative body.static
Test failed on Chrome (headless) (b492c81865).

jQuery('#body').position(): top 256, left 128
    at Object.<anonymous> (http://localhost:57289/test/unit/offset.js:669:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:389:19)
    at http://localhost:57289/test/unit/offset.js:668:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":256,"left":128}
actual: {"top":258,"left":129}
{
  "left": 128,
  "top": 256
  "left": 129,
  "top": 258
}

jQuery('#relative').position(): top 3848, left 1924
    at Object.<anonymous> (http://localhost:57289/test/unit/offset.js:669:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:389:19)
    at http://localhost:57289/test/unit/offset.js:668:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":3848,"left":1924}
actual: {"top":3850,"left":1925}
{
  "left": 1924,
  "top": 3848
  "left": 1925,
  "top": 3850
}

jQuery('#absolute').position(): top 8, left 4
    at Object.<anonymous> (http://localhost:57289/test/unit/offset.js:669:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:389:19)
    at http://localhost:57289/test/unit/offset.js:668:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":8,"left":4}
actual: {"top":10,"left":5}
{
  "left": 4,
  "top": 8
  "left": 5,
  "top": 10
}

jQuery('#absolute').position() round-trips
    at String.<anonymous> (http://localhost:57289/test/unit/offset.js:688:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:383:19)
    at http://localhost:57289/test/unit/offset.js:677:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":10,"left":5}
actual: {"top":12,"left":6}
{
  "left": 5,
  "top": 10
  "left": 6,
  "top": 12
}

jQuery('#relative').position() round-trips
    at String.<anonymous> (http://localhost:57289/test/unit/offset.js:688:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:383:19)
    at http://localhost:57289/test/unit/offset.js:677:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":3850,"left":1925}
actual: {"top":3852,"left":1926}
{
  "left": 1925,
  "top": 3850
  "left": 1926,
  "top": 3852
}

2. offset: nonzero box properties - html.relative body.relative
Test failed on Chrome (headless) (b492c81865).

jQuery('#body').position(): top 8448, left 4224
    at Object.<anonymous> (http://localhost:57289/test/unit/offset.js:669:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:389:19)
    at http://localhost:57289/test/unit/offset.js:668:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":8448,"left":4224}
actual: {"top":8450,"left":4225}
{
  "left": 4224,
  "top": 8448
  "left": 4225,
  "top": 8450
}

jQuery('#body').position() round-trips
    at String.<anonymous> (http://localhost:57289/test/unit/offset.js:688:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:383:19)
    at http://localhost:57289/test/unit/offset.js:677:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":8450,"left":4225}
actual: {"top":8452,"left":4226}
{
  "left": 4225,
  "top": 8450
  "left": 4226,
  "top": 8452
}

3. offset: nonzero box properties - html.relative body.absolute
Test failed on Chrome (headless) (b492c81865).

jQuery('#body').position(): top 8192, left 4096
    at Object.<anonymous> (http://localhost:57289/test/unit/offset.js:669:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:389:19)
    at http://localhost:57289/test/unit/offset.js:668:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":8192,"left":4096}
actual: {"top":8194,"left":4097}
{
  "left": 4096,
  "top": 8192
  "left": 4097,
  "top": 8194
}

jQuery('#body').position() round-trips
    at String.<anonymous> (http://localhost:57289/test/unit/offset.js:688:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:383:19)
    at http://localhost:57289/test/unit/offset.js:677:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":8194,"left":4097}
actual: {"top":8196,"left":4098}
{
  "left": 4097,
  "top": 8194
  "left": 4098,
  "top": 8196
}

4. offset: nonzero box properties - html.absolute body.static
Test failed on Chrome (headless) (b492c81865).

jQuery('#body').position(): top 256, left 128
    at Object.<anonymous> (http://localhost:57289/test/unit/offset.js:669:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:389:19)
    at http://localhost:57289/test/unit/offset.js:668:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":256,"left":128}
actual: {"top":258,"left":129}
{
  "left": 128,
  "top": 256
  "left": 129,
  "top": 258
}

jQuery('#relative').position(): top 3848, left 1924
    at Object.<anonymous> (http://localhost:57289/test/unit/offset.js:669:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:389:19)
    at http://localhost:57289/test/unit/offset.js:668:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":3848,"left":1924}
actual: {"top":3850,"left":1925}
{
  "left": 1924,
  "top": 3848
  "left": 1925,
  "top": 3850
}

jQuery('#absolute').position(): top 8, left 4
    at Object.<anonymous> (http://localhost:57289/test/unit/offset.js:669:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:389:19)
    at http://localhost:57289/test/unit/offset.js:668:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":8,"left":4}
actual: {"top":10,"left":5}
{
  "left": 4,
  "top": 8
  "left": 5,
  "top": 10
}

jQuery('#absolute').position() round-trips
    at String.<anonymous> (http://localhost:57289/test/unit/offset.js:688:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:383:19)
    at http://localhost:57289/test/unit/offset.js:677:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":10,"left":5}
actual: {"top":12,"left":6}
{
  "left": 5,
  "top": 10
  "left": 6,
  "top": 12
}

jQuery('#relative').position() round-trips
    at String.<anonymous> (http://localhost:57289/test/unit/offset.js:688:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:383:19)
    at http://localhost:57289/test/unit/offset.js:677:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":3850,"left":1925}
actual: {"top":3852,"left":1926}
{
  "left": 1925,
  "top": 3850
  "left": 1926,
  "top": 3852
}

5. offset: nonzero box properties - html.absolute body.relative
Test failed on Chrome (headless) (b492c81865).

jQuery('#body').position(): top 8448, left 4224
    at Object.<anonymous> (http://localhost:57289/test/unit/offset.js:669:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:389:19)
    at http://localhost:57289/test/unit/offset.js:668:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":8448,"left":4224}
actual: {"top":8450,"left":4225}
{
  "left": 4224,
  "top": 8448
  "left": 4225,
  "top": 8450
}

jQuery('#body').position() round-trips
    at String.<anonymous> (http://localhost:57289/test/unit/offset.js:688:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:383:19)
    at http://localhost:57289/test/unit/offset.js:677:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":8450,"left":4225}
actual: {"top":8452,"left":4226}
{
  "left": 4225,
  "top": 8450
  "left": 4226,
  "top": 8452
}

6. offset: nonzero box properties - html.absolute body.absolute
Test failed on Chrome (headless) (b492c81865).

jQuery('#body').position(): top 8192, left 4096
    at Object.<anonymous> (http://localhost:57289/test/unit/offset.js:669:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:389:19)
    at http://localhost:57289/test/unit/offset.js:668:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":8192,"left":4096}
actual: {"top":8194,"left":4097}
{
  "left": 4096,
  "top": 8192
  "left": 4097,
  "top": 8194
}

jQuery('#body').position() round-trips
    at String.<anonymous> (http://localhost:57289/test/unit/offset.js:688:13)
    at Function.each (http://localhost:57289/test/data/jquery-3.7.1.js:383:19)
    at http://localhost:57289/test/unit/offset.js:677:19
    at http://localhost:57289/test/data/testinit.js:266:19
expected: {"top":8194,"left":4097}
actual: {"top":8196,"left":4098}
{
  "left": 4097,
  "top": 8194
  "left": 4098,
  "top": 8196
}

7. dimensions: outside view position (gh-2836)
Test failed on Chrome (headless) (b492c81865).

    at HTMLDivElement.<anonymous> (http://localhost:57289/test/unit/dimensions.js:604:10)
    at HTMLDivElement.i (http://localhost:57289/dist/jquery.min.js:2:35077)
    at HTMLDivElement.dispatch (http://localhost:57289/dist/jquery.min.js:2:38074)
    at v.handle (http://localhost:57289/dist/jquery.min.js:2:36054)
expected: -100
actual: 300
+400

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Discuss in Meeting Reserved for Issues and PRs that anyone would like to discuss in the weekly meeting. Offset
Milestone
4.0.0
Development

No branches or pull requests
1 participant
@mgol