Font-awesome: iOS 9 browsers do not render dynamically added icons

[osamak]

Web browsers on iOS 9.x do not render dynamically added icons. This issue is confirmed on Safari 9, Chrome 63, and Firefox 8 (all of the them are Webkit-based)

This could be a problem of the MutationObserver as implemented by Webkit.

The issue is solved by manually triggering,

FontAwesome.dom.i2svg()

Unfortunately, iOS 9, despite being outdated, is still used by tens of millions of devices, which warrants a built-in workaround.

[tagliala]

Hi,

thanks for reporting this.

I can confirm. Replicated on iOS Simulator 9.3

Reduced test case: https://jsfiddle.net/tagliala/vLae8ted/17/

@robmadole could you please take a look?

This issue is confirmed on Safari 9, Chrome 63, and Firefox 8 (all of the them are Webkit-based)

AFAIK, Chrome and Firefox on iOS could be considered as a "skin" over the installed version of Safari, so they are expected to behave the same

[robmadole]

Confirmed. Added to our list.

[robmadole]

https://github.com/FortAwesome/Font-Awesome/issues/12380 https://github.com/FortAwesome/Font-Awesome/issues/12339

[NeoReyad]

Adding this to my project seemed to fix the issue:

const observer = new MutationObserver(() => {
    fontawesome.dom.i2svg();
});


observer.observe(
    document.body,
    {
        attributes: true,
        childList: true
    }
);

[robmadole]

@NeoReyad I don't recommend that. It's going to be pretty inefficient. We have this fix in our board and will get to it soon.

[mikemand]

I came across this issue recently while replacing the HTML of a button with a pulsing spinner. It appears to only affect Safari (tested in Safari 11) because Chrome (tested in Chrome 66) and Firefox (tested in Firefox Developer Edition 60) are OK. The icon just never loads (thus the button is blank). Here's the code I used:

$('#search').on('submit', function (event) {
    $('button', this).prop('disabled', true).html($('<i/>').addClass('fas fa-fw fa-spinner fa-pulse'));
});

If I run the same thing in the console of the page, it will work just fine:

    $('button', '#search').prop('disabled', true).html($('<i/>').addClass('fas fa-fw fa-spinner fa-pulse'));

[brettmhoffman]

@robmadole Where does this issue stand currently? The issue you originally linked (https://github.com/FortAwesome/Font-Awesome/issues/12380#issuecomment-368546083) is no longer available.

[tagliala]

proper link to the referenced issue: #12339