colorArea issue with CSS zoom

[gabridego]

Describe the bug When the zoom or transform: scale() CSS properties are applied to the color picker, the color marker inside the color area is not updated correctly.

To Reproduce Steps to reproduce the behavior:

1. In the demo page, add the zoom or transform: scale() property to the element of id clr-picker using the inspect tool
2. Open the picker and try to move the color marker

Expected behavior The color marker should follow the cursor.

In my application, I only use the zoom property and fixed it for my use case updating the moveMarker function as follows, considering the zoom for the pointer position. However, it should take into account transform: scale() too.

function moveMarker(event) {
  const pointer = getPointerPosition(event);

  if (picker.style.zoom && picker.style.zoom != "") {
    let zoom = picker.style.zoom.trim();
    if (zoom.slice(-1) == "%") {
      // Convert percentage to decimal
      zoom = parseFloat(zoom) / 100;
    }
    zoom = parseFloat(zoom);

    if (!isNaN(zoom) && zoom > 0) {
      pointer.pageX = pointer.pageX / zoom;
      pointer.pageY = pointer.pageY / zoom;
    }
  }

  let x = pointer.pageX - colorAreaDims.x;
  let y = pointer.pageY - colorAreaDims.y;

  if (container) {
    y += container.scrollTop;
  }

  setMarkerPosition(x, y);

  // Prevent scrolling while dragging the marker
  event.preventDefault();
  event.stopPropagation();
}

Amazing library by the way, congrats for the great work!

[mdbassit]

Thank you for reporting this. It is quite difficult to detect CSS transforms (and zoom) in an efficient way. So I don't think I can apply a general fix to this.