CSS grid refactor makes item displacement look less fluid

[mattmutt]

Since adopting the CSS Grid, any time other grid items swap or relocate their position to make room while dragging the intended item, there is no longer a smooth animation. They just jump around around. This is somewhat unexpected compared to the smooth movements previously.

Also this CSS grid change to the project effectively breaks on IE now, if that matters for supporting this ancient browser. IE has limited support, and perhaps a older spec of the CSS grid that it conforms to. Edge is fine.

[tiberiuzuld]

Hi @mattmutt ,

1. Yes the animation the css grid properties cannot be animated unfortunately.
   Seems that only a few properties will be possible to have animation.
   https://stackoverflow.com/questions/43911880/using-css-transitions-in-css-grid-layout
   Item position which is the case here will be not.

2. Yes IE will not be supported. Edge16+ will be

Still under consideration if should I move it to css grid or not.
Or make 2 branches ... one with, one without.
Its one reason why I didn't made the release yet.

Pros to grid:

• way better performance
• renders better when with scroll or without.
• code is simpler
• code can now target ES2017 (smaller bundle)

Cons to grid:

• no longer support of IE11
• no animations of positions
• edge scrolling when drag/resize is different

Any suggestions are welcome

Thanks

[mattmutt]

Would it be worthwhile to explore adding additional children DIV wrappers inside the tag that holds the CSS grid cell? If the actual presented content is inside an absolutely positioned DIV, which is then wrapped by a relative positioned wrapper DIV, it is possible to separate the content from the grid cell. To deal with the transition, the flow might go like this:

• activate positioning of the content DIV to absolute
• calculate the destination coordinates of where the item should appear to move to
• do not alter any CSS grid syntax positioning yet.
• Perform transition animation
• After the transition ends, take the item out of absolute positioning
• Change the CSS grid model syntax to reflect new location if this item is supposed to be committed to that final location, if not then cancel, and animate it back to its original position
• if the math for the new coordinates was correct, then the illusion should look smooth to the end user.

Here is a representation of what I meant by making some new wrappers to help with moving the contents around ( but keeping the original grid cell position allocated until a swap must occur ).

just some thoughts

[tiberiuzuld]

This option will complicate push a lot...
If the wrapper will stay in place and the other items need to move in his place.

[mattmutt]

the wrapper is just an invisible placeholder to allocate space. the red layer is displaced via a translate operation to make it seem like it is moving around. Was thinking if you could somehow give the illusion that the blocks are smoothly moving around with animation it would be a nicer experience. Currently the other items being pushed around move instantly which looks bad when many occur at the same time. The old way was much smoother. With the new CSS Grid, what kind of performance gains are you seeing? Less math to deal with the absolute layout?

[tiberiuzuld]

Yes kinda but also made improvements which where possible before but didn't see them.
And there are less edge cases.
But already kinda made a solution. Still working on it, almost done.

The library will work with both types of layouts.
There will be an option to choose between the 2.
So will continue to support IE11 and have animations with the old one and in parallel will be possible to choose the CSS grid and render with that.

Will make a commit soon to try it out.

[tiberiuzuld]

So besides edge scrolling on Absolute grid everything else should work fine.
Oh and when switching from one to another, resize window before drag or resize ...

[tiberiuzuld]

So today tried to fix a lot of issue with the css grid and hit more road blocks with the transitions and animations so decided to scrap it.

Removed today the css grid from master.
Made a cssGrid branch in case someone will still want to try it.

Kept some of the improvements I made for the grid code which will be in version 5.0.0.

Thanks