The position of the picker does not work correctly when the scale value of the body tag is changed.

[yongjung]

Example) scale(0.39) - click center

[claviska]

Interesting use case. I noticed that it happens if the color picker panel or any of its parents are scaled.

I don't think I'm interested in parsing the DOM to identify CSS properties that affect scaling to determine the offset. It could get messy with nested properties and it seems like a ton of work for an edge case. If someone has an elegant solution, I'm open to a PR.

Note that, if the color picker is scaled down even just 1%, you won't be able to select all possible colors from the panel. (The name "minicolors" is derived from not being able to make the color panel any smaller while still allowing you to select all possible values.)

Also note that you can alleviate this problem by scaling the panel up the opposite amount:

body {
  transform: scale(.5); /* half size */
}

.minicolors-panel {
  transform: scale(2); /* twice the size to account for parent scaling */
}