Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#7972 closed bug (duplicate)

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:


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:

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

Change History (6)

comment:1 Changed 7 years ago by Scott González

Owner: set to 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.

comment:2 Changed 7 years ago by Moshe

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.

comment:3 Changed 7 years ago by Moshe

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.

comment:4 Changed 7 years ago by Scott González

Status: newopen

comment:5 Changed 7 years ago by Scott González

Resolution: duplicate
Status: openclosed

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

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

Duplicate of #7255.

Note: See TracTickets for help on using tickets.