jQueryUI and droppable/draggable do not work with subpixel width/height

jQueryUI and droppable/draggable do not work with subpixel width/height

Description

Issue:
When using jQueryUI (v1.12) with draggable elements which have a width or height that has subpixels (e.g. by using em or rem units) the draggables fly back to their source position even when configured to snap and stay on the target.

Expected behaviour: snap and remain on target.

Browsers affected: All recent (Chrome 62, Firefox 52, IE Edge/11)

I originally thought this to be a bug with jQuery, as downgrading from 3.x to 2.2.4 fixed the issue, but it has been suggested in my ticket that jQueryUI might be the culprit.

I've tested the jsFiddle below with jQueryUI 1.12, 1.11 and 1.10, and all show the same problem. 1.9 doesn't work at all.

Link to test case

Minimal test case: https://jsfiddle.net/bv3ddrjx/7/

To reproduce:

  1. Drag the white boxes onto the drop targets => they'll bounce back (the bug)
  2. In the CSS, remove the subpixels in line 35 and 36 => it works as expected

Use different values of subpixels to get different failures (no draggable works, just one works etc.)