Cannot get this to work in IE 11
heintj opened this issue · 7 comments
Hi,
I can't get these stars to work in IE 11.
Im using angular 9.0.0 with tslib 1.10.0.
I've tried an upgrade with angular 9.0.4 and tslib 1.11.1.
Using the default stars it does work in other browsers:
<ngx-stars [size]="2" color="#ffc800" (ratingOutput)="setValue($event)">
However in IE im seeing yellow squares.
With IE I do see Font awesome icons correctly on other sites.
Ive tried using customStars but with that I'm seeing the yellow squares across all browsers.
Using the URLS as background=url(half-star.svg) for a diffrent div I do see the SVG images correctly in all browsers.
This confirms the css URLs provided should work.
But when I use the URLS for [customStarIcons]=object with empty half and full it will display the squares.
How can I get either of these to work in all browsers?
My customStarIcons object:
icons = {
empty: 'assets/empty-star.svg',
half: 'assets/half-star.svg',
full: 'assets/full-star.svg'
};
Edit: im using ngx-stars version 1.4.3
Hi @heintj thanks for taking the time to make the issue. I will look into this and respond as soon as I can. In the meantime are you sure your asset paths are correct (e.g. should it be '../assets/empty-star.svg or similar)?
@hughjdavey Thanks for your response and willingness to invest time :)
I have checked that the paths are correct.
Using ccs background: url(assets/empty-star.svg) works for other divs
No worries! So I have been investigating this in a VM as I don't have Windows. I made a demo app to test out without worrying about any other complexity.
At first it didn't work at all on IE11, until I changed tsconfig.json's target in compilerOptions to es5 and removed the word not before IE 9-11 in browserslist. After this the page rendered but you are correct, I just saw red squares instead of my custom SVG shapes.
After some digging I have found that IE doesn't support CSS mask-image which is what is used to display the custom SVGs as well as the default stars, which explains why neither work for you. I will look into the possibility of displaying them in a different way, or adding an IE compat fallback.
Yes I forgot about that, those changes are indeed necessary as far as I know to make Angular with IE work (from a certain version of angular).
That does explain why neither work in IE. Those sound like fine solutions :)
Thank you, I will be looking forward to seeing an update!
Hi again @heintj I have now spent a few hours trying to solve this and had no luck so far. IE 11 not only does not support CSS masks, it also does not support CSS clip-path or filter() or Filter Effects. I have a few more things to try but unfortunately I am going on holiday tomorrow for a week, so I don't think I will be able to fix this before then. Feel free to submit a PR if you like, otherwise I will take another look when I get home.
If you still need IE 11 support in the meantime, you could roll back to ngx-stars v1.3.0 which doesn't use CSS masks. It has no support for custom stars but you should be able to use the default ones that come from Font Awesome 4. One caveat - its dependency on Font Awesome is hardcoded via an HTML <link> tag:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
This was removed in ngx-stars v1.4.3 to support custom icons and not needing an internet connection (see #2). So it will not be able to run without internet or a cached version of the Font Awesome 4 styles. If this is OK for you I'd suggest rolling back.
Hi @heintj did this work for you? I am back now so should be able to put some time into properly fixing this if not?
Hi @hughjdavey yes it did work for us. Yesterday I was able to get the pull request through after someone had issues printing the stars and reverting to 1.3.0 also fixed this :)
Thanks for reaching out again and sorry for the delayed response, was waiting on the Pull Request to get accepted.
Putting time into fixing this in a newer version is not necessary for us
Hope your holiday went well!