Skip to main content

Search and Top Navigation

#14869 new bug ()

Opened November 26, 2015 10:32PM UTC

Last modified February 04, 2016 01:09AM UTC

Sortable: Placeholder size not updated at some zoom levels

Reported by: abarrett Owned by:
Priority: minor Milestone: none
Component: ui.sortable Version: 1.11.3
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (1)

Changed February 04, 2016 01:09AM UTC by alexbarrett comment:1

This bug still exists in the current master at [[https://github.com/jquery/jquery-ui/blob/cb69f0025f257c28ac3be39c4269373a9fa74002/ui/widgets/sortable.js#L831|ui/widgets/sortable.js#L831]].

You can see a real world example of this bug affecting a site by dragging the widgets on the Drupal.org dashboard (you need to be logged in to access it) - [[http://i.imgur.com/oPECOVE.png|screenshot here]].