Coloris
Coloris copied to clipboard
colorArea issue with CSS zoom
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:
- In the demo page, add the zoom or transform: scale() property to the element of id clr-picker using the inspect tool
- 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!