csssafariangular-materialgoogle-material-iconsroboto

Material Icons and Roboto not loaded in Safari - only Safari

as you can see in the screenshot the icons and the font are not loaded correctly.

enter image description here

Our observation is that this only does not work in Safari. No matter if we are testing on iPhone or on a Mac.

The fonts are loaded as follows:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Any other Browser we tested displays the icons and font correctly. (Google Browser on iOS; Chrome on Windows)

From what we see in the Safari Debugger it seems that the font files can't be downloaded. (I didn't want to write this but: Sometimes i have observed that it works for a short time and then stops working.)

In Chrome the result looks like this:

enter image description here

What would be the suggestion?

Update 2019-11-13: Found additional information at: https://github.com/doanythingfordethklok/safari-cache-bug

Solution

  • You seem to be running into exactly the bug you've updated your post with.

    Are you perhaps redirecting the user a bunch of times on initial app load? If so the safest bet would be to wait for actual user input before starting any redirects, this will also ensure everything has been loaded properly.

    An alternative approach would be to wait for the document to become ready via (i.e. jQuery's) document.ready function:

    $(document).ready(function() {
    // your code here
});

    You could try putting your code there or, alternatively, wait for user input until initiating the redirects. I personally didn't have any luck with the document.ready approach and switched to the user input method.