Safari icon flash on reload using SVG with JS in FA5 Pro

[bryannaegele]

Describe the problem

We've observed an issue in iOS Safari (tested in 11.2) where icons are rendering normally, then unload and reload again (causing a box flash) as the page finishes refreshing. The relevant CSS and JS files are cached properly and we do not observe this in any other browser. The icons in question are using pseudo-elements if that helps narrow it down.

What did you expect?

Pseudo-element icons should not unload and re-render on page refresh when cached properly.

What version and implementation are you using?

Version: Font Awesome Pro 5.0.6
Browser and version: iOS Safari v11.2

• SVG with JS
• Web Fonts with CSS
• SVG Sprites
• On the Desktop

Reproducible test case

.header.ses-content.content .nav-toggle:before {
    font-family: 'Font Awesome 5 Regular';
    content: '\f0c9';
    display: none
}

Unable to create a test case with Pro version due to lack of CDN. Any suggestions for creating a test case are welcome. I am also unable to find any examples on fontawesome.com to attempt to reproduce. The only example I can find is in the instructions https://fontawesome.com/how-to-use/svg-with-js which is 3/4 of the way down the page. There are no anchor tags on the page to link to in order to keep the icon visible on reload.

Bug report checklist

• I have filled out as much of the above information as I can
• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

Does this happen on the Font Awesome website?

Also, please make sure that your request follows our bug report request template

[bryannaegele]

@tagliala I updated the report.

I am unable to find any examples on fontawesome.com to attempt to reproduce. The only example I can find is in the instructions https://fontawesome.com/how-to-use/svg-with-js which is 3/4 of the way down the page. There are no anchor tags on the page to link to in order to keep the icon visible on reload. Any suggestions are welcome for creating another test case.

[tagliala]

@bryannaegele please check that this is still an issue with font awesome 5.0.6

[bryannaegele]

@tagliala yes. Confirmed it's still an issue in 5.0.6

[tagliala]

@bryannaegele thanks. I will take a look asap

[tagliala]

@bryannaegele are you using turbolinks (or any javascript framework which can interfere with page rendering)?

[tagliala]

I've uploaded on my github this page: https://tagliala.github.io/fa12277.html

I'm using a valid HTML5 template with your css (with " instead of ')

I'm on iOS 11.3b2

Are you able to reproduce your issue on my page?

[bryannaegele]

No turbolinks. The production site uses fastly but this is reproducible locally.

I do still see the behavior in your test page both in iOS Simulator and on real devices. It's harder to notice with no other scripts running, but it's definitely there on refreshes. It seems almost like it's every other refresh that it shows up.

[tagliala]

Frame 51 of the gif

I can confirm this is an issue also on 11.3b2 (on 4G, it's harder to reproduce for me on Wi-Fi)

[robmadole]

That looks like the browser is trying to display the pseudo element briefly. Recently we've noted that using SVG with JS and pseudo-elements should be a last-ditch approach. I regret adding it in the first place ;)

@bryannaegele can you use anything else? Can you use actual <i> tags? Can you use web fonts with CSS instead?

[tagliala]

I just remembered this 🤦‍♂️

[bryannaegele]

We did go a different route but the added payload is unwelcome. This does seem to be an iOS specific issue, which doesn't bother me one bit, but rankles the feathers of some designers. I have not observed this bug in any other browser, so it seems like it may be worth investing a little time investigating if you deem this functionality worthwhile to support.

[robmadole]

I'm pushing people away from pseudo-elements with SVG and JS as much as possible. The way that it has to work in the browsers is just riddled with issue. So I don't think any more time in this would be worth the investment @bryannaegele

[natalan]

Also, we just found that this issue can be caused by using Font Awesome 4 webfont together with Font Awesome 5 SVG elements.