Sortable: Placeholder size not updated at some zoom levels

Summary

Placeholder elements do not always have their size set correctly when the browser is zoomed in or out.

||jQuery version||2.13||

||Browser version||Chrome 46.0.2490.86||

||Operating system||Windows 10||

||Reduced test case||https://jsfiddle.net/alexb/2q2np5gt/||

Explanation

The bug on this line in sortable.js jquery-ui/ui/widgets/sortable.js#816 and remains in the master branch at present.

Sortable uses the condition !p.height() to check if the placeholder has a height of 0, and resizes it to match the dragged item.

The 'Additional Notes' on .height() say:

''The number returned by dimensions-related APIs, including .height(), may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.''

In the test case, p.height() is returning fractional values very close to zero at certain zoom levels causing the condition to fail. I think this is due to the way Chrome handles zooming borders, giving them fractional computed widths that snap to pixels nicely when multiplied by the zoom level.

This bug can presumably affect the width of placeholders as well but I haven't tested that.

Solution

Presumably checking for very small values returned by .height() instead of just 0. Maybe there's a better way though.