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

clr-open-label not initialized on osX #121

Closed GCalToolkit closed 1 year ago

GCalToolkit commented 1 year ago

Great picker, thank you! The only problem I've found is that on osX (Venture) and Chrome (Version 117.0.5938.88 (Official Build) (x86_64)) the clr-open-label is not initialized with the default color, even though the label text shows the correct color value. The exact same code on Windows/Chrome works perfectly. Any ideas?

mdbassit commented 1 year ago

Thank for the kind words!

I'm not sure I understand. clr-open-label is the id of the element that contains a text label used for accessibility purposes, it has nothing to do with a default color.

If the following page works for you on MacOS Ventura and Chrome 117, then it's not a issue in the color picker itself: https://coloris.js.org/examples.html

GCalToolkit commented 1 year ago

I'm using the picker in a Chrome Extension pop-up and I'm not exactly sure what the problem is, but I've fixed it by setting the color with inline css on 'clr-field' each time the pop-up loads. I also had to set '.clr-preview button' opacity to 0 or there's a weird shape in front of the 'close' button:

Screenshot 2023-09-22 at 12 42 10
mdbassit commented 1 year ago

Unfortunately I have no experience writing chrome extensions, but from the screenshot, I'm guessing the buttons' width and background color CSS properties are being overridden.

GCalToolkit commented 1 year ago

Yes, I think it's a combination of CSS overrides and some JS timing issues particular to Chrome Extensions. Not a big problem - it's all working perfectly now with those tweaks, thanks for your help, and for what is probably the best JS colour picker!