Skip to main content

Search and Top Navigation

#8710 closed bug (fixed)

Opened October 22, 2012 01:17PM UTC

Closed January 09, 2015 08:10PM UTC

Last modified February 09, 2015 05:04PM UTC

Position: collision: "flip" doesn't work in some situations

Reported by: olejorgenb Owned by: olejorgenb
Priority: minor Milestone: 1.11.3
Component: ui.position Version: 1.9.0
Keywords: Cc:
Blocked by: Blocking:
Description

http://jsfiddle.net/q9h3A/ (slightly modified position testcase)

Resize the window as small as you can without getting vertical scrollbar (about the size of the gray rectangle)

Move the target element down, at some point the narrow high blue rectangle should flip, but it doesn't. The smaller one works.

Attachments (0)
Change History (27)

Changed October 22, 2012 02:11PM UTC by scottgonzalez comment:1

owner: → olejorgenb
status: newpending

This is working fine for me. Are you seeing the problem in certain browsers?

Changed October 22, 2012 02:20PM UTC by olejorgenb comment:2

status: pendingnew

Strange.. I've tested in IE9, FF and chrome

This is what I'm getting: http://i.imgur.com/CaCa6.png The long one is supposed to flip in that case, right?

Changed October 22, 2012 02:21PM UTC by olejorgenb comment:3

(If I increase the window height slightly in the above screenshot and press "trigger position" it flips as expected)

Changed October 22, 2012 02:33PM UTC by scottgonzalez comment:4

status: newopen

Yup, I'm seeing the problem now. It seems to only appear with certain heights and certain scrolling.

Changed October 24, 2012 01:31PM UTC by scottgonzalez comment:5

summary: 'flip' doesn't work for my: "right top", at: "right bottom" (in some situations)Position: collision: "flip" doesn't work for my: "right top", at: "right bottom" (in some situations)

Changed October 25, 2012 04:21PM UTC by scottgonzalez comment:6

#8733 is a duplicate of this ticket.

Changed October 25, 2012 05:24PM UTC by Deocarlos comment:7

_comment0: The problem occurs with me too. When i use the autocomplete on iframe and the overflow occurs on Bottom of this iframe, the collision:flip have problems. With collision:fit the behavior is ok. \ \ The problem occurs with the last version of jQuery and jQuery-ui released. WHen i use jquery-1.7.2.min.js and jquery-ui-1.8.20 the problem doesn't occurs. \ \ This is screenshot of my project (The window opened is one iframe): \ \ With position FLIP is problem: http://s10.postimage.org/txakha1e1/position_flip.png \ \ With position FIT is ok: http://s8.postimage.org/kyxeu6f85/position_fit.png1351217111800420
_comment1: The problem occurs with me too. When i use the autocomplete and the overflow occurs on Bottom, the collision:flip have problems. With collision:fit the behavior is ok. \ \ The problem occurs with the last version of jQuery and jQuery-ui released. WHen i use jquery-1.7.2.min.js and jquery-ui-1.8.20 the problem doesn't occurs. \ \ This is screenshot of my project (The window opened is one iframe): \ \ With position FLIP is problem: http://s10.postimage.org/txakha1e1/position_flip.png \ \ With position FIT is ok: http://s8.postimage.org/kyxeu6f85/position_fit.png1351217138416666
_comment2: The problem occurs with me too. When i use the autocomplete and the overflow occurs on bottom page, the collision:flip have problems. With collision:fit the behavior is ok. \ \ The problem occurs with the last version of jQuery and jQuery-ui released. WHen i use jquery-1.7.2.min.js and jquery-ui-1.8.20 the problem doesn't occurs. \ \ This is screenshot of my project (The window opened is one iframe): \ \ With position FLIP is problem: http://s10.postimage.org/txakha1e1/position_flip.png \ \ With position FIT is ok: http://s8.postimage.org/kyxeu6f85/position_fit.png1351218244691259

The problem occurs with me too. When i use the autocomplete and the overflow occurs on bottom page, the collision:flip have problems. With collision:fit the behavior is ok.

The problem occurs with the last version of jQuery and jQuery-ui released. WHen i use jquery-1.7.2.min.js and jquery-ui-1.8.20 the problem doesn't occurs.

With position FLIP is problem: http://s10.postimage.org/txakha1e1/position_flip.png

With position FIT is ok: http://s8.postimage.org/kyxeu6f85/position_fit.png

Changed October 31, 2012 03:07PM UTC by olejorgenb comment:8

Reverting https://github.com/jquery/jquery-ui/commit/7f808b2047725cd8fde51a948cb4e5f5946c82e1 seems to fix my problem.

PS: For my needs I'd rather want a "don't flip unless it makes the _whole_ element fit" option than "flip if more of the element fits when flipped" but that is obviously use-case dependent

Changed October 31, 2012 10:00PM UTC by Deocarlos comment:9

The new version of jQueryUI (1.9.1) already had this change, and in some cases he still have problems with flip :(

Changed November 01, 2012 09:45PM UTC by olejorgenb comment:10

**Reverting** that commit fixed my problem (ie. that commit seems to have introduced the bug)

Changed January 25, 2013 09:23PM UTC by tj.vantoll comment:11

milestone: 1.10.0none

Changed May 21, 2013 07:12PM UTC by meyertee comment:12

I've ran into that problem too, and for what it's worth, here's another simpler test case: http://jsfiddle.net/meyertee/twrLf/

You can see the flip-behavior changing depending on the amount it overflows at the bottom.

I've also identified https://github.com/jquery/jquery-ui/commit/7f808b2047725cd8fde51a948cb4e5f5946c82e1 as the reason. As Deocarlos suggests, the motivation seems to be "only flip if it actually fits at the flipped position". But the code doesn't do that.

Changed August 29, 2013 04:06AM UTC by k_borchers comment:13

I have to say I don't think there is a bug here. In the original fiddle http://jsfiddle.net/q9h3A/, because the containment is the window, this only looks like a bug due to the framing done by jsfiddle. If you look at the exact same fiddle but using the full browser window http://jsfiddle.net/q9h3A/show, it works as expected.

As for the second fiddle http://jsfiddle.net/meyertee/twrLf/, it appears to also be working as expected. The red div flips because there is a space large enough to accommodate it (210px of padding and the element is 200px tall). If you change the padding to 200px or less, the flip doesn't happen.

Changed August 29, 2013 12:34PM UTC by scottgonzalez comment:14

There's definitely a bug. In the first fiddle the problem is only visible when the document is larger than the window. So take the full window version and adjust your browser size until there's a scrollbar. In the second one, even though there's space to fit the element after a flip, more of the element is visible if it doesn't flip, so it shouldn't flip.

Changed September 04, 2013 04:47PM UTC by meyertee comment:15

To clarify: in the second fiddle the red layer is positioned to the bottom of the green layer. When making the display area smaller by moving the fiddle-separator down, it should flip to the top (because there's enough space and more space to the top then). It doesn't flip though, only within a small range it jumps up and then down again.

I'm working on a fix, just need to get the local setup & unit tests to work..

Changed September 04, 2013 09:35PM UTC by meyertee comment:16

I created a pull request which reverts the aforementioned commit, and also added unit tests to show that the code before that commit already did what it seemingly aimed to fix.

If there is a another reason for the commit that I didn't see, maybe you could add it as a unit test to make its intention a bit more clear?

https://github.com/jquery/jquery-ui/pull/1071

Changed September 27, 2013 06:12PM UTC by Aaronius comment:17

I'm also reproducing this bug in a separate environment and also pinpointed it to the same line of code meyertee pointed out.

Changed May 23, 2014 08:12PM UTC by scottgonzalez comment:18

#10061 is a duplicate of this ticket.

Changed May 28, 2014 06:56PM UTC by scottadmi comment:19

_comment0: I encountered this bug related to the flip position (in my case center top/bottom, but same cause) and the culprit is certainly the line referenced by meyertee. In my build 1.10.4 it is line 444 of jquery.ui.position.js (and also in the latest beta). The reversion of commit 7f808b2 solves it, however a smaller fix is possible because the root cause is a single inverted greater than/less than comparison (which did not account for the fact that negative values indicate overlap in the preceding if-block while positives do in this one). \ \ The current line below: \ if ( ( position.top + myOffset + atOffset + offset) > overBottom && ( newOverTop > 0 || abs( newOverTop ) < overBottom ) ) { \ \ can be corrected to this: \ if ( ( position.top + myOffset + atOffset + offset) < overBottom && ( newOverTop > 0 || abs( newOverTop ) < overBottom ) ) {1401303596071553

I encountered this bug related to the flip position (in my case center top/bottom, but same cause) and the culprit is certainly the line referenced by meyertee. In my build 1.10.4 it is line 444 of jquery.ui.position.js (and also in the latest beta). The reversion of commit 7f808b2 solves it, however a smaller fix is possible because the root cause is a single inverted greater than/less than comparison (which did not account for the fact that negative values indicate overlap in the preceding if-block while positives do in this one).

The current line below:

if ( ( position.top + myOffset + atOffset + offset) > overBottom && ( newOverTop > 0 || abs( newOverTop ) < overBottom ) ) {

can be corrected to this:

if ( ( position.top + myOffset + atOffset + offset) < overBottom && ( newOverTop > 0 || abs( newOverTop ) < overBottom ) ) {

Changed July 24, 2014 07:36PM UTC by scottgonzalez comment:20

summary: Position: collision: "flip" doesn't work for my: "right top", at: "right bottom" (in some situations)Position: collision: "flip" doesn't work in some situations

Changed July 24, 2014 07:36PM UTC by scottgonzalez comment:21

#9680 is a duplicate of this ticket.

Changed January 09, 2015 08:10PM UTC by Thomas Meyer comment:22

resolution: → fixed
status: openclosed

Position: Restore old flip collision handling

This reverts commit 7f808b2047725cd8fde51a948cb4e5f5946c82e1.

Fixes #8710

Ref gh-1071

Changeset: ebaaca7206cae201ec069dbaed85bc8d6beeab32

Changed January 09, 2015 08:10PM UTC by Thomas Meyer comment:23

Position: Add unit tests for bug 8710

Ref #8710

Closes gh-1071

Changeset: 4de983c6d5eacbdc668c0b7280d9818dd6281a53

Changed January 09, 2015 08:10PM UTC by scottgonzalez comment:24

milestone: none1.12.0

Changed February 09, 2015 05:02PM UTC by Thomas Meyer comment:25

Position: Restore old flip collision handling

This reverts commit 7f808b2047725cd8fde51a948cb4e5f5946c82e1.

Fixes #8710

Ref gh-1071

(cherry picked from commit ebaaca7206cae201ec069dbaed85bc8d6beeab32)

Changeset: 276cd5cd8cbef787328335a11ad19864242ccafd

Changed February 09, 2015 05:02PM UTC by Thomas Meyer comment:26

Position: Add unit tests for bug 8710

Ref #8710

Closes gh-1071

(cherry picked from commit 4de983c6d5eacbdc668c0b7280d9818dd6281a53)

Changeset: 9db405798dd5fc8ee603991226916351ec2a0dda

Changed February 09, 2015 05:04PM UTC by scottgonzalez comment:27

milestone: 1.12.01.11.3