color-js / elements

WIP
12 stars 1 forks source link

`<color-gamut>` (and other elements which use it) is broken in Safari #13

Closed DmitrySharabin closed 3 months ago

DmitrySharabin commented 4 months ago

The Color object imported from a (dynamically downloaded) module (https://colorjs.io/dist/color.js)

https://github.com/color-js/elements/blob/31a14ba86cb155c2e92fa78ca832b743937529d8/src/common/color.js#L12

is treated by Safari as an uninitialized variable.

As a result, this line throws ReferenceError: Cannot access uninitialized variable.

https://github.com/color-js/elements/blob/31a14ba86cb155c2e92fa78ca832b743937529d8/src/color-gamut/color-gamut.js#L154

DmitrySharabin commented 4 months ago

If it's in the browser cache, it might begin working on user interaction. See the demo on the <color-gamut> page.

DmitrySharabin commented 4 months ago

If we don't fix issues with other components by fixing this issue, I'll file separate issues for them. For now, it's unclear whether they don't work because of <color-gamut> or have some other issues.

DmitrySharabin commented 4 months ago

My investigation showed that this issue might be related to top-level await (a known issue in Safari) in common/color.js:

https://github.com/color-js/elements/blob/8b96596315a434491187ac4f2755dfb574b02a46/src/common/color.js#L12

LeaVerou commented 3 months ago

It's this WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=242740

LeaVerou commented 3 months ago

Now that this is fixed, we need to document what other bugs the components have in Safari. From a quick look, I did spot a few…