ui.position rounds values, generating wrong positions

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.

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.

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.

http://jsfiddle.net/dtSB7/3/

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

Duplicate of #7255.