Dragging animation/movement bug with absolute hidden elements

[xcrap]

So this is an interesting bug or kind of flickering situation.

In this first situation I have elements with buttons with a hover state. When I first load the page the dragging works fine, after the first dragging them the dragging movements no longer animates or works properly, it still works but it's not like the normal dragging.

https://github.com/user-attachments/assets/41dab7d4-e454-4292-b046-93af9a8411aa

In this second situation without hover effect, everything works normally.

https://github.com/user-attachments/assets/0094e379-cf5e-44f4-98ac-a42a8286bf3f

@foreach($blog->images as $image)
    <div data-swapy-slot="{{ $loop->count - $loop->iteration + 1 }}">
        <div data-swapy-item="{{ $image->id }}">
            <div class="w-40 bg-white group relative p-2 border border-slate-100 rounded">
                @php
                $thumbnailPath = pathinfo($image->filename);
                $thumbnailUrl = Storage::url($thumbnailPath['dirname'] . '/' . $thumbnailPath['filename'] . '_s.' . $thumbnailPath['extension']);
                $actualImageUrl = Storage::url($image->filename);
                @endphp
                <img src="{{ $thumbnailUrl }}" alt="Blog Image" class="w-full aspect-[1/1] object-contain rounded pointer-events-none" id="image-{{ $image->id }}">
                <input type="file" name="edit_image[{{ $image->id }}]" class="hidden" id="edit-image-{{ $image->id }}">
                <div class="absolute hidden group-hover:flex bottom-4 right-0 left-0 justify-center gap-1.5">
                    <button data-swapy-handle type="button" class="p-1.5 bg-slate-500 hover:bg-black text-white rounded focus:outline-none transition duration-100">
                        <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <path fill="currentColor" d="M16.192 5.657a1 1 0 0 0 0-1.414l-2.828-2.829a2 2 0 0 0-2.829 0L7.708 4.243a1 1 0 1 0 1.414 1.414L11 3.778v7.272H3.728l1.879-1.878a1 1 0 0 0-1.415-1.415l-2.828 2.829a2 2 0 0 0 0 2.828l2.828 2.829a1 1 0 1 0 1.415-1.415L3.828 13.05H11v7.172l-1.879-1.879a1 1 0 1 0-1.414 1.414l2.829 2.829a2 2 0 0 0 2.828 0l2.828-2.829a1 1 0 0 0-1.414-1.414L13 20.121v-7.07h7.071l-1.778 1.777a1 1 0 0 0 1.414 1.415l2.828-2.829a2 2 0 0 0 0-2.828l-2.828-2.829a1 1 0 1 0-1.414 1.415l1.879 1.878H13V3.88l1.778 1.778a1 1 0 0 0 1.414 0Z" />
                        </svg>
                    </button>
                    <button type="button" class="p-1.5 bg-slate-100 hover:bg-black text-slate-500 hover:text-white rounded focus:outline-none transition duration-100 insert-image" data-image-url="{{ $actualImageUrl }}"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12" />
                        </svg>
                    </button>
                    <button type="button" class="p-1.5 bg-slate-100 hover:bg-black text-slate-500 hover:text-white rounded focus:outline-none transition duration-100 edit-image" data-image-id="{{ $image->id }}"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                        </svg>
                    </button>
                    <button type="button" class="p-1.5 bg-slate-100 hover:bg-black text-slate-500 hover:text-white rounded focus:outline-none transition duration-100 delete-image" data-image-id="{{ $image->id }}"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
    @endforeach

So basically all happens here.

<div class="absolute hidden group-hover:flex bottom-4 right-0 left-0 justify-center gap-1.5">

This sets the absolute hidden buttons and hovers on the parent div, this is what's causing the strange behavior, if i remove the hover and leave the buttons always visible like this:

<div class="flex bottom-4 right-0 left-0 justify-center gap-1.5">

There's no problem at all.

Just an interesting find.