Color picker does not work properly on mobile.

[liesahead]

When you drag the color selection cursor, even in your demo, page background moves along with cursor.

To reproduce:

Option 1: open your demo website from mobile browser and try to pick color, drag color selection cursor.

Option 2: open chrome, toggle device toolbar, select mobile devices (for example, iPhone X), reload page and open your demo website. Try to pick color, drag color selection cursor.

Solution suggestion:

Make it possible to stop preventing event's default and stopping propagation somehow. Maybe return event not as value, for example 'colorPickerChange' returns string value, it could be whole event instead.

[sconix]

The dialog should stop propagation of the slider events, but I guess the page moving happens due to some other event that the dialog does not handle. I'll check this as soon as I have time to see what is going on.

[mayankkataria]

Did anybody found the solution? I'm also facing the same issue.

[arndwestermann]

Same for me, its pretty annyoing. :/

[mayankkataria]

It started working when I installed other node module. Its strange I don't know how it happened. This solution is working in my older project and not working in latest version of ionic-angular (in android).

I just did the following and it worked in my older project:

1. Paste the following code in HTML and let it be hidden.

<div id="color-picker-section" [hidden]="true">
      <color-sketch id="color-picker" [color]="color"
      (onChange)="changeColor($event)"
      [presetColors]="['#000000', '#FFFFFF']"></color-sketch>
    </div>

2. npm i ngx-color
3. import { ColorSketchModule } from 'ngx-color/sketch';
   And then I was able to slide on this ngx-color-picker. When I was commenting the hidden code, again I was unable to slide on it. That's how I concluded this. Hope it helps.

Thanks