Items shift to the left/right when resizing in a >12 column grid

[everskies]

Subject of the issue

I've experimented with using a large number of columns (30+) and stumbled upon a bug where resizing one side (East or West) of the grid resulted in the opposite side jumping to another column (The element grew and shrunk in width at random and often moved one column to left or right)

I've reproduced it on JSFiddle but its harder to trigger the bug than on my own project.

https://jsfiddle.net/wnpe9jza/11/

To reproduce in the fiddle: Drag the left drag handle of any box slowly until you can see the the right corner jump to the next column.

Here's a video showing it more clearly:

https://www.youtube.com/watch?v=MsGNMtLXpj4&feature=youtu.be

Your environment

gridstack.js v1.2
Confirmed in Firefox and Chrome

Steps to reproduce

Define a grid with more than ~30 columns and enable resizing

Expected behaviour

The opposite side of the element being resizes should never change position

Actual behaviour

The opposite side of the element often jumps to a different column

[adumesny]

first of all if you have custom columns (>12) you need special CSS - https://github.com/gridstack/gridstack.js#custom-columns-css - see if that fixes your issue. re-open if still an issue with an example.

I see you seem to have 64 column CSS but there is something wrong with your styling. for one thing you need to set margin to be tiny (say 1px) as you can't have that many columns in the fiddle case. Tiles are not square either. I don't have time to debug what's wrong with your CSS.

last time I checked https://github.com/gridstack/gridstack.js/blob/develop/spec/e2e/html/810-many-columns.html was just fine (with 60 column)

[everskies]

It also occurs in the demo and the JSFiddle I've linked. However, I've found the root cause of the issue,

Having a high column count or a slim grid relative to the amount of columns results in a loss of precision in the dragOrResize function as the X and Width is being calculated by a rounded cellWidth and that result is rounded again after.

GridStack.prototype.cellWidth = function () {
    return Math.round(this.$el.outerWidth() / this.opts.column); <- Width is rounded
};

x = Math.round(ui.position.left / cellWidth); <- X is calculated using the rounded cellWidth
width = Math.round(ui.size.width / cellWidth); <- Width is calculated using the rounded cellWidth

I've resolved my issue by not rounding the cellWidth() result. I'm not sure what other impact this might have.

GridStack.prototype.cellWidth = function () {
    return this.$el.outerWidth() / this.opts.column;
};

Can you verify if my solution doesn't break any other logic @adumesny? I'll submit a PR then!

[adumesny]

oh I fixed that in 2.x (which is why I couldn't re-pro) #810 (there is a bit more to it) and also fixed the margin thing (which is needed for high column count (#1308).

I really need to get 2.x out

dup of #810
thanks for testing and finding.

[everskies]

Ah, that makes sense! I'm glad I was able to practice my debugging skills then :D