Skip to main content

Search and Top Navigation

#7972 closed bug (duplicate)

Opened December 27, 2011 02:48PM UTC

Closed February 12, 2012 03:21AM UTC

Last modified February 12, 2012 03:21AM UTC

ui.position rounds values, generating wrong positions

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

The fix for #5280 creates a problem when calculating positions for elements inside elements placed on non-integer positions.

The bug can be seen here:

http://jsfiddle.net/dtSB7/

For example, elements with percentage positions or margin: auto; can create problems for their sub-elements.

Attachments (0)
Change History (6)

Changed December 28, 2011 02:37AM UTC by scottgonzalez comment:1

owner: → Moshe
status: newpending

I'm not seeing the behavior you describe. The values in the comments in the fiddle aren't correct anyway, since the containing elements aren't positioned. There was also a change to handle fractions; see #7255.

Changed December 28, 2011 12:35PM UTC by Moshe comment:2

status: pendingnew

When checking the generated style with firebug (or view selection source), it has the following style:

<div style="position: relative; top: 0px; left: 100.5px;" id="positioned-item">

</div>

Can you see this?

My assumption is the following:

  • All the elements are visible, so the positions can be calculated.
  • The green box has a width of 150px, the blue box has a width of 50px, this means the logical 'left' value to place on the blue box is 'left: 100px' (to align the right border of the blue box on the right border of the green box).
  • The value 'left: 100.5px' as calculated by jQuery UI, is wrong, and the reason for this is the rounding (it happens before the final values are calculated).

The red box is the reason the absolute positions for both the green and the blue box are non-integral. However, the relative position of the blue box within the green box is round. Think of it like this:

  • The red box has a width of 575px, this means the center of this element is at 287.5
  • The green box has a width of 150px, and is positioned in the center of the red box, this means the horizontal offset is at 287.5 - 75 = 212.5 ( $('#centered-item').offset() confirms this )
  • The new offset for the blue box, calculated by ui.position is 312.5, but this gets rounded to 313.
  • setOffset calculates this absolute offset of 313 back to the css value for left: 313 - 212.5 = 100.5

I have seen this behaviour is a lot of different ways, everywhere where the position of the outer element is placed by firefox on a non-integral pixel. This is a problem with any site that has margin: auto; and the browser window happens to have an odd width.

Removing the fix for #5280 solves this issue, but obviously reintroduces that problem, I'm not exactly sure how to fix that, hence this ticket.

Note: I'm using firefox 8, and have not seen this behaviour with chrome (I have not tested other browsers). I guess chrome rounds the positions returned by .offset() while firefox does not.

Changed December 28, 2011 12:46PM UTC by Moshe comment:3

I have changed the fiddle so the problem can also be seen visually. The blue box is not placed correctly in the right bottom of the green box.

Changed December 29, 2011 01:14PM UTC by scottgonzalez comment:4

status: newopen

Changed February 12, 2012 03:21AM UTC by scottgonzalez comment:5

resolution: → duplicate
status: openclosed

This is fixed by the ticket I mentioned in my initial comment.

Changed February 12, 2012 03:21AM UTC by scottgonzalez comment:6

Duplicate of #7255.