search

mdbassit / Coloris

A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.
https://coloris.js.org/examples.html
MIT License
461 stars 58 forks source link

Dragging hue and alpha markers doesn't work on iOS #109

Closed filip-nikoloski closed 1 year ago

filip-nikoloski commented 1 year ago

Dragging the markers doesn't work in about 95% of the attempts on iOS. But there is no problem if you just tap on any point of those sliders.

Also, no problems dragging over the color area (#clr-color-area) at the top of the widget.

Tested on iPhone and iPad iOS and iPadOS 16.5.1 Safari 16.5.1 Chrome 110.0.5481.114

mdbassit commented 1 year ago

I don't currently own an iPhone or iPad, so it will be hard for me to test it. I will see what I can do.

The hue and alpha sliders are standard HTML range input fields, so it is quite strange that they don't work. Could you test the range sliders on this page and tell me if they work for you? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

filip-nikoloski commented 1 year ago

I did some more testing and found out that on iOS you can only drag the slider if you grab the marker (thumb). On other OSs/browsers you start dragging anywhere on the slider (track) and the marker automatically follows the cursor.

The problem in this case is that the marker dimensions are set to 8px/8px in CSS, which makes it very hard to grab the invisible marker on iOS. The following code fixed the problem for me:

.clr-picker input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -4px;
  -webkit-appearance: none;
}
mdbassit commented 1 year ago

Indeed increasing the thumb size should be better for usability, but your code is not enough, I'll push an update shortly that does it properly.

Thanks for reporting this.

melloware commented 1 year ago

0.21.0 is now in NPM: https://www.npmjs.com/package/@melloware/coloris