After opening the app, the screen will flicker and then the content will render but the SVG icons are missing and the custom font is not used. If I quit the app and open again, everything displays as expected. I’ve experienced using Blaze and now Svelte so I don’t think either of them is to blame.
Has anyone else run into this situation?
We have / had the same issue.
Our “quick fix” is to basically inline all SVGs and images which are part of the layout, meaning using
src: url(data:font/ttf;base64,AAEAAAARAQAABAAQR0RFRga4BgAAAL9YAAAAOEdQT1MlBfY7AAC …
and
content: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE4NTQuOTkgNDA3LjgyI (…)
in our css / scss files.
We converted the files using File to Base64 Converter - Encode Files to Base64 - Online - Browserling Web Developer Tools
and reading up on stuff here: https://patdavid.net/2012/08/embedding-fonts-with-css-and-base64/
.
This gets rid of the issue.
→ But we are / weren’t exactly sure where that comes from.
But actually yesterday I had a hunch: I noticed that all our builds need & do a Hot Code Push basically immediately after they’re started, probably because our settings between the server & the mobile-settings.json we built the app with isn’t identical. Maybe the early reload / refresh of either the internal Cordova WebAppServer or the client having an issue loading the image & then not retrying is connected to this?
→ Maybe when I get around to it I’ll look into how to sync the build settings with the actual server settings, though even that wouldn’t help after a newer version has been released via the server actually.