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

Wrong position coordinates on jquery version > 3.2.1 (excluded transform values from calc) #5169

Closed
LuckyHumster opened this issue Nov 25, 2022 · 1 comment
Closed

Wrong position coordinates on jquery version > 3.2.1 (excluded transform values from calc) #5169

LuckyHumster opened this issue Nov 25, 2022 · 1 comment

Comments

@LuckyHumster
Copy link

Bug Reports:

  • What do you expect to happen? - element position will calculated with transform values
  • What actually happens? - element position calculated without transform values
  • Which browsers are affected? - chrome, firefox, cobalt and etc...

JQuery with version higest then 3.2.1 wrong calculated position. transform: translate values not participate in calculations

jquery version > 3.2.1:
$('.child').position() -> {top: 0, left: 0} - this is wrong position

jquery version <= 3.2.1:
$('.child').position() -> {top: 11, left: 562} - this is right position

Code exemple:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> -->
    <style>
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            position: relative;
        }
        .main{
            top: 40px;
            width: 400px;
            height: 500px;
            margin: 0 auto;
            border: solid 1px black;
            transform: translateY(10px);
        }
        .child{
            width: 50px;
            height: 50px;
            margin-top: 40px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="child"></div>
    </div>
</body>
@mgol mgol added the Discuss in Meeting Reserved for Issues and PRs that anyone would like to discuss in the weekly meeting. label Dec 1, 2022
@timmywil
Copy link
Member

timmywil commented Dec 12, 2022 •
edited

Thanks for opening an issue. We discussed this in the meeting. Our logic in offsetParent ignores offset parents that are table, th, td as well as parents with transforms. We're pondering whether we can simplify that and fully rely on native offsetParent in all browsers. That would be a breaking change and likely not something we could do until 5.0.

However, aligning with the spec would not change your particular use case. We do think 0, 0 is correct here as position is relative to the offsetParent and the child element is 0, 0, away from main. Granted, it arrived at the right solution the wrong way.

Further discussion in #3479

@timmywil timmywil removed the Discuss in Meeting Reserved for Issues and PRs that anyone would like to discuss in the weekly meeting. label Dec 12, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@timmywil @mgol @LuckyHumster