Black output on iOS devices (iPhone and iPad) #45
Comments
|
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 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. :> |
|
Hello James, thank you for your fast response, I wish you a speedy recovery! Indeed, the codepen demo renders as black on the iPhone and iPad.There is no in the . I am currently using v3.5.3 but I was wondering, any chance you could point me to a v3.5.1 download?Perhaps indeed it was unintentionally broken in v3.5.2 so as long there are no major differences between 3.5.1 and 3.5.3 I would be fine using 3.5.1. Thanks again for the prompt answer. |
|
Thanks! You can find v3.5.1 on unpkg here: https://unpkg.com/@jaames/[email protected]/dist/iro.js Let me know if it's any different :> |
|
Thanks a lot, will test as soon as I get the time and will come back with an answer. |
Did you find a solution. I got same black output for ios devices. |
|
@ramzanucar Not yet, I had other stuff to work on but right now I am going to try the 3.5.1 version and see if it works. |
|
@jaames So the 3.5.1 version seems to work great on iOS, tested on Chrome and Safari but anyways as you have already said, all the browsers on iOS act similar to Safari.So my guess is something "broke" between 3.5.1 and 3.5.3.I did not test 3.5.2 but I am happy with 3.5.1 for now.Hopefully this information will help you fix 3.5.2 also :) Thank you for the quick answers and for the 3.5.1 link. |
|
Hey! Sorry for the dead air, I've been kinda busy recently... I just checked the official Codepen demo on MacOS Safari 12.0 (14606.1.36.1.9) again and it seems to work fine now? I also can't see any issued with generating the gradient URL under various conditions. I'm going to assume maybe it was just a temporary bug introduced in one version of Safari that's since been fixed, but please do reopen the issue thread if you're still having problems. Thanks! |
|
On an iPhone7 Safari browser, if I add url parameters to the codepen, then I can reproduce the black palette: It doesn't seem to be a problem for Safari desktop browser. I am using iro.min.js v3.5.3 Edit: |
|
@jtb Nice catch! I just pushed a hotfix (v3.5.4) which should add URL parameters to the SVG URLS. It seems to fix the issue on my end (testing on desktop Safari). It looks as though Safari fixed some SVG rendering stuff in release 71, but I'll need to investigate further to see if that's actually the case. Originally the issue was related to certain client-side routing libraries inserting a |
|
Looks like the base tag issue is still present in MacOS Safari Version 12.0 (14606.1.36.1.9), so I guess we still can't just use Safari really is the new IE. :P |
|
Thanks James for the quick fix. Looks like that fixed things. Thanks for making such a nice color picker! |
|
I believe this issue is still present when page is launched with home screen shortcut. |
|
@625alex Please could you provide some more information? It would be helpful to know if you're using a client-side routing library, the URL of the page (in Safari, iro.js has to use the full page URL to link SVG gradients), as well as what the rendered HTML structure looks like in this case. I don't have a working iPhone at the moment so I can't test myself. |
|
I'm using AngularJS with client-side routing. The The rendered HTML structure looks fine to me. I will try to play with the SVG gradient URL to see if I can isolate the issue. |
|
I think the problem is with the following:
|
|
@625alex Ahh, thanks for the heads-up. I'll try to work on a fix now. :) |
|
I just pushed a hotfix which adds a check to see if the userAgent matches I tested with Xcode's iOS Simulator and the bug doesn't seem to be present in the iOS 12.0 webview, so please let me know if that solves the issue @625alex Cheers! |
|
@jaames Any progress on this issue? |
|
@13546777510 Yes, thank you for creating a test repository, it was very helpful! It looks like the problem is that Ionic Webview sets the value of I think I have a fix, I'll create a new branch in a moment :) |
|
@13546777510 Please try replacing iro.js with this script: https://github.com/jaames/iro.js/blob/ionic-svg-url-fix/dist/iro.js Expected result: If it works, I'll push it as iro.js version 4.5.2 |
|
@jaames Great, it works as expected!
|
|
@13546777510 Excellent, I'm glad that worked! :) I published the fix on NPM, so please update to iro.js v 4.5.2 |
|
@jaames Good, thank you very much |
|
I am still facing this issue, Ionic 4 with iPhone XS - iOS 13.1.2 @jaames |
|
@jaames @leonardosalles I have reproduced this issue in ionic4 and created a repository to reproduce this problem. https://github.com/13546777510/iro-ionic4
|
|
It seems Ionic 4 doesn't support relative SVG gradient URLs, but Ionic 3 does? I think that's a bug on their end. Anyway, I found a workaround using protocol-relative URLs that fixes the test repository and also works in the latest versions of macOS and iOS Safari. @13546777510 @leonardosalles Please try replacing iro.js with this script: https://github.com/jaames/iro.js/blob/ionic4-svg-url-fix/dist/iro.js I would also appreciate it if you could test it in ionic 3 and ionic 4 to confirm that it works in both :) Thanks! |
|
@jaames I will start working after 12 hours :) |
|
@jaames In ionic4, this problem is fixed. But the issues with ionic3 has appeared again, The same is true for real devices.
|
|
@jaames Did you reproduce this issues in ionic3? |
|
@13546777510 I wasn't able to test in Ionic 3 Is there any way to check which version of Ionic is running from Javascript? I think iro.js will have to detect which version of Ionic is being used to know how to resolve gradient URLs I'd also appreciate it if someone could report this as a bug to Ionic, because I don't want to have to keep adding checks for every future version of their library. It's a bit ridiculous that they've broken SVG gradients to begin with. |
|
I am worried that I have not described it very clearly, so if there is any need to add a description, I hope you can go to that question to help continue to add. tks. |
|
@jaames The question was replied. He said that it was not an ionic issues, It's cordova. I might also need to apply for help from cordova. |
|
@13546777510 Thank you for following that up :) Would it be reasonable to ask people to use Capacitor instead of Cordova if they want to use iro.js in an ionic app? I don't know how different they are to eachother. Looking at the issues in cordova-plugin-ionic-webview repository, there haven't been any replies from the Ionic team in a long time... |
|
@jaames Apache Cordova is also called PhoneGap. As for why Capacitor is also present, I suspect that for historical reasons, they are now suitable for large mixed app projects. I have always used cordova in my project because it's open source cordova-plugin is enough to meet my project needs. For the time I started learning to program, I have never known the plugin for Capacitor. I don't really know what they are doing behind the scenes: Ionic, Angular, Capacitor, Cordova, Typescript... I just focus on coding and looking for full-featured plugins, forgive me for not doing any in-depth research. |
|
@jaames Is there a better solution for compatibility with ionic? Perhaps this issue is worthy of discussion with developers who use ionic to develop smart home apps. RBG strip controllers require iro.js support. |
|
@13546777510 to be honest, I don't know If the issue is cordova-plugin-ionic-webview then it's strange that iro.js works in one version of Ionic but not the other, unless there are different versions of cordova-plugin-ionic-webview? I've never used Ionic or Cordova before, and I don't understand them very well, so I'm not certain. I think I will open a new issue to ask for help from developers who have experience with Ionic and Cordova. Until someone else can help, iro.js won't be able to support Cordova. I'm sorry. |
|
@jaames I agree to wait for the help of developers with Ionic and Cordova experience, and I will always be concerned about this issue. |
|
I'm going to close this issue thread, but please feel free to continue on #88 if you find anything new Thanks! |
|
@13546777510 @leonardosalles Looks like this was fixed with #89, so please update to the latest version of iro.js! |
|
@jaames thanks for the support, will try the latest version soon. |
|
@jaames Everything is normal now, it is worth celebrating! Thank you very much for the help of @jcesarmobile 👍 |
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: #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)
<div id="demoWheel_101"></div> <input type="text" name="tst_101" class="input_101" value=""> 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 + ")"); }); </script>The text was updated successfully, but these errors were encountered: