jaames
commented
6 years ago Hey @mnem77, sorry to hear that you've been having trouble!
It looks like this might be an issue with Safari in general, and not with your particular setup. Even the official iro.js codepen demo renders as black on Safari for macOS.
Just to rule out possible causes -- is there a <base> element in the <head> of your HTML? What does the URL path for your test page look like? Is it using an <iframe>?
I'm sick with flu right now so it'll be a while before I can investigate fully, but my guess is that it was either unintentionally broken in v3.5.2, or the recent Safari update has somehow managed to break its SVG gradient implementation even more.
BTW, the reason it also doesn't work on iOS Chrome is because all third-party browsers on iOS are basically just Safari webviews. :>
mnem77
Hi!
I've been testing iro.js library and it's working quite nicely besides this problem I seem to be having only on iOS devices with any browser I test ( Chrome, Safari etc ).I can see that someone else had the exact same problem but only on Safari apparently.
I can confirm that your demo page ( https://iro.js.org/ ) works just fine on the testing devices yet while I access my testing page the output is black.Even with the output being black the functionality "is there", I can drag around the circle and the color is generated correctly.
Link to the similar Issue thread on GitHub: https://github.com/jaames/iro.js/issues/18
Example of how I create the color picker (even though is really basic, should not and does not seem to be a parameters problem or anything similar)
`
var demo = new window.iro.ColorPicker("#demoWheel_101", { width: 360, height: 360, color: "#f00", borderWidth: 2, padding: 4, anticlockwise: true, }); demo.on("input:end", function onInputStart(color) { console.log("0"); console.log(color.rgb); $(".input_101").css("background-color", "rgb(" + color.rgb.r + "," + color.rgb.g + "," + color.rgb.b + ")"); }); `