#9588 open bug ()

Opened October 04, 2013 07:23PM UTC

Last modified May 04, 2017 03:42PM UTC

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

Attachments (0)
Change History (9)

Changed October 04, 2013 07:27PM UTC by azielinski comment:1

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

Changed October 06, 2013 08:15PM UTC by tj.vantoll comment:2

owner: → 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.

Changed October 06, 2013 08:46PM UTC by azielinski comment:3

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

Changed October 08, 2013 12:00PM UTC by tj.vantoll comment:4

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.

Changed May 28, 2014 12:27PM UTC by tj.vantoll comment:5

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
.

Changed May 28, 2014 12:35PM UTC by tj.vantoll comment:6

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 :(

Changed September 16, 2014 04:27AM UTC by melinath comment:7

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

Changed October 14, 2014 10:07PM UTC by shahafabileah comment:8

_comment0: 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 standalong 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> \ ``` → 1413324592565691
_comment1: 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 standalong 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> \ }}} → 1413324612846490

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>

Changed May 04, 2017 03:42PM UTC by scottgonzalez comment:9

#14827 is a duplicate of this ticket.