9 ms·

Doesn't work for the latest Safari browser.

by somid3 4y ago

deleted 4y ago
[deleted]
evantahler 4y ago
iOS and MacOS. It’s ok in chrome.
digitalsankhara 4y ago
Seconded. Safari Version 16.0 Fine in Chrome. Thanks for this colour wheel, very handy reference.
arantius 4y ago
Interesting, can you be more specific? Developed in Firefox, reports that Chrome is OK. I don't have a Mac to test with.
- lioeters 4y ago
  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)
  - JKCalhoun 4y ago
    Yeah, Chrome don't like either, but apparently Chrome does not throw.
- r2222 4y ago
  Shows just pretty much empty screen, with one black polygon at the top: https://i.ibb.co/3Ms9m6T/SCR-20221121-qgw.jpg https://i.ibb.co/3Ms9m6T/SCR-20221121-qgw.jpg
- halostatue 4y ago
  I found and I think fixed the issue. https://github.com/arantius/web-color-wheel/issues/1 https://github.com/arantius/web-color-wheel/issues/1
  - panzerboiler 4y ago
    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.
    - divbzero 4y ago
      This is what I saw too. Safari apparently does not support SVGStyleElement.sheet: https://developer.mozilla.org/en-US/docs/Web/API/SVGStyleElement/sheet https://developer.mozilla.org/en-US/docs/Web/API/SVGStyleEle...
      - halostatue 4y ago
        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.
        deleted 4y ago
        [deleted]
        divbzero 4y ago
        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.
- panzerboiler 4y ago
  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...
tambourine_man 4y ago
Yep, Safari latest https://imgur.com/a/Tsx9pEZ https://imgur.com/a/Tsx9pEZ
- moffkalast 4y ago
  To the surprise of absolutely nobody. Webkit implementing web standards: https://media.tenor.com/images/7d9d11dacf3d5c4043c1da7cf5f11dbc/tenor.png https://media.tenor.com/images/7d9d11dacf3d5c4043c1da7cf5f11...
  - tambourine_man 4y ago
    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.
    - moffkalast 4y ago
      Well it's not like you get a choice on iOS anyway
  - alwillis 4y ago
    WebKit is doing quite well these days: https://wpt.fyi/interop-2022 https://wpt.fyi/interop-2022
    - moffkalast 4y ago
      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.
      - alwillis 4y ago
        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/ https://webkit.org/blog/13096/css-has-pseudo-class/ [2]: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...

Doesn't work for the latest Safari browser.

by somid3 4y ago

Doesn't work for the latest Safari browser.

deleted 4y ago

[deleted]

evantahler 4y ago

iOS and MacOS. It’s ok in chrome.

digitalsankhara 4y ago

Seconded. Safari Version 16.0 Fine in Chrome. Thanks for this colour wheel, very handy reference.

arantius 4y ago

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

lioeters 4y ago
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)
- JKCalhoun 4y ago
  Yeah, Chrome don't like either, but apparently Chrome does not throw.
r2222 4y ago
Shows just pretty much empty screen, with one black polygon at the top: https://i.ibb.co/3Ms9m6T/SCR-20221121-qgw.jpg https://i.ibb.co/3Ms9m6T/SCR-20221121-qgw.jpg
halostatue 4y ago
I found and I think fixed the issue. https://github.com/arantius/web-color-wheel/issues/1 https://github.com/arantius/web-color-wheel/issues/1
- panzerboiler 4y ago
  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.
  - divbzero 4y ago
    This is what I saw too. Safari apparently does not support SVGStyleElement.sheet: https://developer.mozilla.org/en-US/docs/Web/API/SVGStyleElement/sheet https://developer.mozilla.org/en-US/docs/Web/API/SVGStyleEle...
    - halostatue 4y ago
      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.
      - deleted 4y ago
        [deleted]
      - divbzero 4y ago
        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.
panzerboiler 4y ago
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...

tambourine_man 4y ago

Yep, Safari latest https://imgur.com/a/Tsx9pEZ https://imgur.com/a/Tsx9pEZ

moffkalast 4y ago
To the surprise of absolutely nobody. Webkit implementing web standards: https://media.tenor.com/images/7d9d11dacf3d5c4043c1da7cf5f11dbc/tenor.png https://media.tenor.com/images/7d9d11dacf3d5c4043c1da7cf5f11...
- tambourine_man 4y ago
  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.
  - moffkalast 4y ago
    Well it's not like you get a choice on iOS anyway
- alwillis 4y ago
  WebKit is doing quite well these days: https://wpt.fyi/interop-2022 https://wpt.fyi/interop-2022
  - moffkalast 4y ago
    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.
    - alwillis 4y ago
      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/ https://webkit.org/blog/13096/css-has-pseudo-class/ [2]: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...