angular
bug(CdkDragDrop): reordering smaller against larger items produce flickering effect
Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
When using CdkDragDrop for reordering items with different sizes (e.g. width for horizontal orientation) in a container with greater height then of the elements there is a flickering effects. CdkDragDrop moves larger item really quickly from one side to another.
Try to drag "Iron age" over empty space in container against some wider item (e.g. "Early modern period")
Example uses angular 12, but in angular 17 it works the same.
Reproduction
StackBlitz link: https://stackblitz.com/edit/angular-fhqz1h?file=src%2Fapp%2Fcdk-drag-drop-horizontal-sorting-example.css,src%2Fapp%2Fcdk-drag-drop-horizontal-sorting-example.ts,src%2Fapp%2Fcdk-drag-drop-horizontal-sorting-example.html
Expected Behavior
Reorder elements without flickering effects, as it is when reordering elements of the same size or when container is not larger (e.g. greater height for horizontal list).
Actual Behavior
Larger element in the list that is reordered against moves fast from one side to another.
Environment
- Angular: 12
- CDK/Material: 12
- Browser(s): any
- Operating System (e.g. Windows, macOS, Ubuntu): any
Can you post an example of what this flickering looks like? I tried out the linked Stackblitz and it seemed to work fine.
When I upload video it says that it cannot be played because the file is corrupted. How should I provide the example?
I have tried uploading to youtube but it seems like framerate of videos on youtube is small and it doesn't flickers. Here is the link: https://www.youtube.com/watch?v=TGO4uFqUu-o here is a video that can be downloaded: https://fileport.io/2ebJ8kEhvUgC I screencasted video at a 60 FPS, but actually it moves even faster.
I have checked it on Windows 10 (Firefox and Chrome) and Ubuntu 20.04 (Firefox and Chrome). It works well for items that are smaller or equals or slightly bigger than the one being dragged, but for larger element against which it is being dragged, the larger the element, the longer the flickering, because it flickers until the cursor reach the end of the element against which it is being dragged. It also works well if item is being dragged over other items, but if the user moves the element onto an empty area of the drop container then it starts flickering.