Kanban headers are floating while scrolling

Question

When I scroll the Kanban to the right or left side, the Columns headers are floating in such a way that they are not part of Kanban. This bug is violating the Cumulative Layout Shift metric.

When you see the Kanban Demos in mobile, the headers are appearing floating.

Here is a demo video of card's floating:-

https://www.veed.io/download/847a6156-ac9c-4c3b-b98f-89858e1b8147

Here is my custom code(Here the Kanban is scrollable left to right even on bigger screen devices):-

https://codesandbox.io/s/7ciby?file=/src/index.js

Indrajith Srinivasan · Answer

Hi Parag, 
 
Greetings from Syncfusion support, 
 
We have validated your reported query using the shared sample browser sample and video demo. We are clear with the exact issue, you are trying to convey with the Kanban. We suspect you are denoting either of the following,  
 

The space between the Kanban cards and header, doesn’t it seems like the card are floating ?
The Kanban column headers which is floating when scrolling the cards to the end to its maximum extend left/right ? 
 
The above details will be helpful for us to further investigate on the reported issue. 
 
Regards, 
Indrajith

parag sharma · Answer

I am pointing to the 2nd issue i.e "The Kanban column headers which is floating when scrolling the cards to the end to its maximum extend left/right".

Indrajith Srinivasan · Answer

Hi Parag, 
 
We have further validated on the reported query “The Kanban column headers which is floating when scrolling the cards to the end to its maximum extend left/right”. The reported case is not an issue in the Kanban component, it is the behavior in IOS devices which makes the HTML to bounce when the scroll reaches the end (left/right) of the scroll containers. Check the below link for reference. 
 
Reference: https://stackoverflow.com/a/39821505/8319836 
 
Regards, 
Indrajith