Why isn't miniplayer movable with background-image?

[Dr.Sol]

Miniplayer isn't movable (the player is on the same place when clicking on left mouse button on the player and move the mouse), when using a linear gradient in background-image in .miniPlayerFrame. The colors used was not transparent at any value.

.miniPlayerFrame {
background-image: linear-gradient(#c5e4fd 2%, #ffffff 9% 16%, #c4e3fd 37% 63%, #4b4961 89% 93%, #c4e3fd 99%);
}

If I comment away the background-image it is movable again.

Howcome?

[jiri]

That's really the case, lookint into it and will let you know...

Thanks,
Jiri

[drakinite]

Miniplayer dragging is determined by the pixel color underneath the mouse, and it's compared to the rgb values of "background-color" set by the css. If the pixel color under the mouse matches the aforementioned rgb values, then the window is marked as draggable to the OS. If the background is set to a gradient, then the pixel color under the mouse will almost never match the rgb value that's set by the background-color value.

This decision was made because it'd be very complicated to make dozens of small touch targets around the UI elements, so instead, just make everything draggable except for the UI elements because the UI elements are colored differently from the background.

I looked into this a couple years ago because if your monitor uses a custom color profile, then the pixel value under the mouse might be slightly different from the RGB value set by CSS, meaning that the miniplayer is not draggable if it appears on that monitor. Unfortunately, I'm not sure what the best solution here would be