2031953 - www.canva.com - Color picker (eyedropper) icon is not visible in color panel, preventing access to the tool

Status: NEW

(Web Compatibility :: Site Reports, defect, P2)

Description

[Bernadett Farkas]

Environment:
Operating system: Mac OS X 10.15 / Windows 10
Firefox version: Firefox 149.0 / Firefox Nightly 151.0a1 (2026-04-14)

Preconditions:
Log in with valid user credentials

Steps to reproduce:

1. Access: https://www.canva.com
2. Open any template
3. Select any element
4. Click on color panel icon
5. Select "Add a new color"
6. Observe the page

Expected Behavior:
Color picker (eyedropper) icon is visible and can be used accordingly

Actual Behavior:
Color picker (eyedropper) icon is not visible

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/216231

Comment 1

[Bernadett Farkas]

Attachment: Missing color picker icon Nightly vs Chrome

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 3

[Sky Schubert [:skyschub]]

This looks like very intentional feature detection on their end - we should investigate what they're looking on.

Comment 4

[Kagami Rosylight [:saschanaz] (they/them)]

They use EyeDropper check.

https://static.canva.com/web/3fd10051aeeed3cd.js

          __c.sgb = function () {
            if ('EyeDropper' in window) return new rgb
          };

              var rgb = class {
                async start() {
                  return this.iXh.open().then(
                    ia.wrap(
                      a => {
                        a = a.sRGBHex;
                        if (!a.startsWith('#')) {
                          const {
                            r: b,
                            g: c,
                            b: d
                          }
                          = ze(a);
                          a = (new me(b, c, d)).RF()
                        }
                        return a
                      }
                    ),
                    ia.wrap(() => {
                    })
                  )
                }
                constructor() {
                  this.iXh = new EyeDropper
                }
              };

Clicking the eyedropper button hits this code path in Chrome.