Hacker News Reader

Comment by somid3 | Hacker News Reader

Doesn't work for the latest Safari browser.

Interesting, can you be more specific? Developed in Firefox, reports that Chrome is OK. I don't have a Mac to test with.

As per another comment, this is the problematic line: points += `${s.x} ${s.y}, `;

It has an extra comma at the end. Safari throws when passed to: c.setAttribute('points', points)

Yeah, Chrome don't like either, but apparently Chrome does not throw.

Shows just pretty much empty screen, with one black polygon at the top: https://i.ibb.co/3Ms9m6T/SCR-20221121-qgw.jpg

I found and I think fixed the issue.

https://github.com/arantius/web-color-wheel/issues/1

I don't think the real issue is that one. At least in Safari I get this:

    t = document.createElement("template")
    t.innerHTML = `<style id="outside"></style><svg><style id="inside"></style></svg>`
    t.content.querySelector("#outside").sheet // null
    t.content.querySelector("#inside").sheet // undefined

That means that the .sheet property is present on the style element, but not if it is inside an svg element.

This is what I saw too. Safari apparently does not support SVGStyleElement.sheet:

https://developer.mozilla.org/en-US/docs/Web/API/SVGStyleEle...

The compatibility chart shows Safari supporting SVGStyleElement.sheet since v 3 (v1 iOS).

The fix that I suggested does seem to produce a working colour wheel, however.

Interesting, the missing SVGStyleElement.sheet must be a Safari bug not captured by MDN’s compatibility chart? Your workaround of finding the sheet in document.styleSheets is clever and seems to work.

For some reason, the style element inside the svg does not have a .sheet property. A workaround is to create the style element in js and append it to the svg, or move it outside the svg and let the styles cascade. A strange bug...

Yep, Safari latest

https://imgur.com/a/Tsx9pEZ

To the surprise of absolutely nobody.

Webkit implementing web standards: https://media.tenor.com/images/7d9d11dacf3d5c4043c1da7cf5f11...

I’ve been developing for the web for 25 years and Safari is my browser of choice.

I use Chrome for its developer tools exclusively.

Well it's not like you get a choice on iOS anyway

WebKit is doing quite well these days: https://wpt.fyi/interop-2022

And yet there is only one browser that 5 people always comment about saying "not working" when there's some kind of web thing posted on HN. Those tests don't seem to reflect reality.

I still recall a time 3 years ago when they didn't even have working webrtc support hah.

I still recall a time 3 years ago when they didn't even have working webrtc support hah.

That’s a long time ago in web years. Things are different now.

For example, Safari supports the oklch and oklab color spaces starting with Safari Technology Preview 137, released December 2021.

It’s November 2022 and Chrome still doesn’t support them yet, though they are expected to be enabled by default in Chrome 110, due next month.

And of course the most anticipated selector probably ever :has() shipped in Safari 15.4 back in March [1]; Chrome didn’t ship it until August and Firefox still doesn’t have enabled by default—it’s behind a flag due to bugs.

The oklab and oklch color spaces solve a bunch of color issues with RGB and HLS [2].

This is not WebKit from 3 years ago.

[1]: https://webkit.org/blog/13096/css-has-pseudo-class/

[2]: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...

I decided to rebuild the OP post in Oklab just to see what would happen - https://observablehq.com/@mjbo/oklab-named-colors-wheel

Turned out pretty well

This is much more useful than RGB for telling which colors are overrepresented imo. Thanks for making/sharing this!

Same… and I’m running Safari 16.2 on the latest public beta of macOS Ventura.

Seconded. Safari Version 16.0

Fine in Chrome. Thanks for this colour wheel, very handy reference.

iOS and MacOS. It’s ok in chrome.

Reply on news.ycombinator.com