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:
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
comment:2 Changed 10 years ago by
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
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
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
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
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
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
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>
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