Opened 3 years ago

Last modified 3 years ago

#14869 new bug

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 version2.13
Browser versionChrome 46.0.2490.86
Operating systemWindows 10
Reduced test casehttps://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.

Change History (1)

comment:1 Changed 3 years ago by Alex Barrett

This bug still exists in the current master at 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) - screenshot here.

Note: See TracTickets for help on using tickets.