Hacker News Reader

Comment by arantius | Hacker News Reader

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

View on HN

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

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.

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...

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.

Reply on news.ycombinator.com