Issues when zooming in / out

[tappi287]

What is the current behavior?

Can not select black / rgb(0, 0, 0) when picking a color from the palette if pickr is used with nano theme in Opera and Chrome.

Please provide the steps to reproduce and create a JSFiddle.

JSFiddle example or https://simonwep.github.io/pickr/

What is the expected behavior?

In Classic or Monolith theme picking black / rgb(0, 0, 0) from the palette is possible.

Your environment:

Version (see Pickr.version): 1.5.0
Used bundle (es5 or normal one): es5
Used theme (default is classic): nano
Browser-version:  Opera 64.0.3417.167 / Chrome 79.0.3945.130
Operating-system:  Windows

[simonwep]

What do you mean? If you move the knob to the very bottom left it shows #000000 and rgba(0, 0, 0, 1) if RGBA is selected?!
Typing these values works too.

[tappi287]

Neiter bottom right nor left selects 100% black in the browsers I stated. The behaviour is identical in RGBA/HEXA/HSVA with or without opacity, with or wthout swatches enabled.
Please see a quick screen recording here:

[simonwep]

Huh, I tried it on a 1080p and 1440p screen, both in opera and chrome - windows; without any problems. Could you describe your env more precisely? I see pickr is somewhat aligned to the left in your GIF - which isn't set as default on the demo-page. The issue might be an edge case :/

[tappi287]

Hmm, thanks for looking into it! I've tested it on Windows 10 machine with 2560x1440 + 1920x1200 dual screens and another Windows 10+Windows 7 machine with 4096x2160 + 2560x1440p dual screens.
The webp recording is from the linked JSFiddle. In all of the scenarios Firefox is working just fine.

[Andreto]

I could reproduce the problem by zooming out to 90% on https://simonwep.github.io/pickr/ in chrome. I've also experienced this issue when using the picker in a chrome extension where I intentionally have it smaller than usual to fit the window.

[simonwep]

Fixed in 10fdf27, I'll publish a new version soon!

[ouweiya]

I found a quirk when I used it in a Chrome extension.
Body font of Chrome extension page font-size: 75%; (12px),
The pickr library uses em, which will cause the actual page to become smaller.
If you use it in a Chrome extension, you need to reset the font size.

body {
  font-size: 16px;
}

You can also not set the font on the Body, just set the font size on the container where the color selector is located.