Upgrade from bootstrap 3 to bootstrap 5 causes visual problems

[profeciak]

Hi, I have prepared a hook dndHandle on a font-awesome icon. The idea is that only catching this icon enables the drag and drop mechanism. It was working perfectly fine in bootstrap 3. However when I ugraded to bootstrap 5 is is still working fine as a matter of functionality but there is a slight problem with visual aspect that I'm not able to workaround. When the icon is "caught" to drag. Now the shadow of "caught" element is not just that one line, but basically the whole page that is below the caught element, which could misleads the users as it suggest that the whole page would be dragge. Do you have any idea what might caused this problem and also how to fix this? The version I'm using is "ngx-drag-drop": "2.0.0", and Angular 9. I've tried to do the upgrade to the newest version but then the project was not compiling so for now I'm not trying to use the newest version of the lib. Thanks for any ideas/help

[reppners]

Hi, sounds like an issue with how browsers (mainly recognized this in Chrome and its derivates) changed the way that they take images of the dragged element. Maybe there is a change in the way an font-awesome icon is rendered between those bootstrap versions which leads to the change in drag image behaviour. It's out of control of this library unfortunately.

[profeciak]

Hmm I'm not sure it can be a problem with font-awesome because I've the same as earlier but I will try tomorrow how this would react if it's not an icon but for example a "x" letter and let you know if the problem still exists. Thanks for answering so fast!

[profeciak]

Hi, as promised I've tried with <span dndHandle>text and the problem persists, so in my opinion it has nothing to do with the font-awesome icon. Funny thing... on Firefox v. 102.0 64 bit there is no problem both with text and with icon. The problem seems to exist on Opera v 89.0.4447.71 and Chrome v. 103.0.5060.114