search

simonwep / pickr

🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
https://simonwep.github.io/pickr
MIT License
4.31k stars 285 forks source link

Issues when zooming in / out #192

Closed tappi287 closed 4 years ago

tappi287 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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: screen_recording

simonwep commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

ouweiya commented 3 years ago

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.