Opened 10 years ago

Last modified 6 years ago

#9588 open bug

Sortable: wrong position is calculated in WebKit/Blink with scrolling and overflow hidden/auto on <body>

Reported by: azielinski Owned by: azielinski
Priority: minor Milestone: none
Component: ui.sortable Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:

Description

If:

  • Body has overflow-x: hidden;
  • Sortable is wrapped in a div with position: relative
  • Page is scrolled down

Then in chrome position of dragged element is miscalculated; I isolated this issue in here:

​http://jsbin.com/uLInoFA/1

I got it fixed in this pull request: ​https://github.com/jquery/jquery-ui/pull/1093

here's a proof: ​http://jsbin.com/aHiBUHE/1

Change History (9)

comment:1 Changed 10 years ago by azielinski

ah - these links to jsbin.com - you need to scroll the page down; it looks like an empty page on the first glance but it is not

comment:2 Changed 10 years ago by tj.vantoll

Owner: set to azielinski
Status: new → pending

Hi azielinski,

Thanks for taking the time to contribute to the jQuery UI project. Could you explain what you're trying to do here?

I ask because having overflow-x: hidden on the <body> and then positioning elements outside of the viewport with relative positioning seems very odd.

Also from the description I'm assuming the behavior ONLY affects Chrome? I'm wondering if it's potentially related to this bug that was just patched in Blink and WebKit ​https://code.google.com/p/chromium/issues/detail?id=157855.

Thanks for your help.

comment:3 Changed 10 years ago by azielinski

Status: pending → new

Hi!

I am not trying to do anything specific - I was working on a website that was designed in such a manner that overflow-x: hidden on <body> was necessary, and also there were some sortable widgets "below the fold" that I found were not working properly while testing the website under Chrome; It wasn't the first time I saw it, so I isolated the issue, found the exact place where it happened and filled this ticket.

The WebKit issue you linked to looks like the possible cause - I just checked if it happens on konqueror and it does! So it is related to the WebKit rather than Chrome; I am not sure what is the next step in this case, I think it would make sense to include some fix for WebKit browsers released before the recent fix - but I do not know what are the rules in here

comment:4 Changed 10 years ago by tj.vantoll

Status: new → open
Summary: Sortable - wrong position is calculated in Chrome in a very specific case → Sortable: wrong position is calculated in WebKit/Blink with scrolling and overflow: hidden on <body>

The problem occurs in Safari as well. I'll mark this valid for now.

comment:5 Changed 9 years ago by tj.vantoll

Summary: Sortable: wrong position is calculated in WebKit/Blink with scrolling and overflow: hidden on <body> → Sortable: wrong position is calculated in WebKit/Blink with scrolling and overflow hidden/auto on <body>

Another test case from #4802 (​http://jsfiddle.net/BDNVK/), which shows that this also happens with overflow: auto.

comment:6 Changed 9 years ago by tj.vantoll

fyi, although this issue exists in Chrome 35, it is no longer present in Chrome 37, presumably due to this change: ​https://codereview.chromium.org/26489005. The issue does still occur in Safari 7.0.4 though :(

comment:7 Changed 9 years ago by melinath

FTR, I am getting this behavior using bootstrap with sortables. Chrome 37.0.2062.120. jQueryUI 1.11.1.

comment:8 Changed 9 years ago by shahafabileah

I'm still running into this exact problem on Mac OSX using Chrome 38.0.2125.101 and jQueryUI 1.11.1.

In case it helps, my standalone repro is included below.

For now I'll revise my page to avoid setting overflow-x on body.

REPRO: 

<html>

    <head>

        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />

        <style>
            body {
                overflow-x: hidden;
            }

            .sortable {
                position: relative;
            }

            .sortable .item {
                width: 100px;
                border: 1px solid black;
                background: white;
                padding: 5px;
                margin-top: 10px;
            }

            .spacer {
                width: 100px;
                border: 1px solid black;
                background: #AFF;
                padding: 5px;
                height: 800px;
                margin-top: 10px;
            }
        </style>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.js"></script>

        <script>
            $(function() {
                $('.sortable').sortable({});
            });
        </script>

    </head>

    <body>

        <div class="spacer">(spacer)</div>

        <div class="sortable">
            <div class="item">One</div>
            <div class="item">Two</div>
            <div class="item">Three</div>
        </div>

        <div class="spacer">(spacer)</div>

    </body>

</html>
Last edited 9 years ago by shahafabileah (previous) (diff)

comment:9 Changed 6 years ago by Scott González

#14827 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.