Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Icons not loading in Safari #787

Closed
Chethansannju opened this issue Aug 26, 2016 · 16 comments
Closed

Icons not loading in Safari #787

Chethansannju opened this issue Aug 26, 2016 · 16 comments
Labels
bug

Comments

@Chethansannju
Copy link

Hi,

I'm using office fabric ui in our project and i found a issue that the office fabric icons are not getting loaded in safari browser where as it works well in all other browsers. Please let me know what i need to do..
@ericthompson
Copy link
Contributor

Looking into this now to see if we can repro.

@ericthompson
Copy link
Contributor

We tested this out and didn't have it repro. Are you still seeing this issue?

@ericthompson
Copy link
Contributor

Please let us know if there are more details and I can reopen.

@patrickabel
Copy link

@ericthompson I am seeing this issue as well.

@ericthompson ericthompson reopened this Oct 20, 2016
@ericthompson
Copy link
Contributor

@patrickabel and @Chethansannju - What versions of Fabric are you both using? Just trying to narrow down between the latest and the older set.

Thanks for any info!

@leddie24
Copy link
Contributor

Hi @patrickabel. I just tried reproing this with a page with some random icons and couldn't see the issue. Running OS X v 10.12, Safari Version 10.0 (12602.1.50.0.10), Fabric core version 4.0.0 from the CDN. Can you update the ticket with a code snippet and other information?

Thanks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/fabric-core/4.0.0/fabric.min.css">
</head>
<body>
    <ul>
        <li><i class="ms-Icon ms-Icon--Mail" aria-hidden="true"></i></li>
        <li><i class="ms-Icon ms-Icon--MapPin" aria-hidden="true"></i></li>
        <li><i class="ms-Icon ms-Icon--Pin" aria-hidden="true"></i></li>
        <li><i class="ms-Icon ms-Icon--FavoriteStar" aria-hidden="true"></i></li>
    </ul>
</body>
</html>

@leddie24 leddie24 reopened this Oct 26, 2016
@ericthompson
Copy link
Contributor

@Chethansannju and @patrickabel - could you let us know what versions of macOS, Safari, and Fabric you're using?

@ericthompson
Copy link
Contributor

We're going to go on ahead and close this, but let us know if you have more info - we're not able to repro.

@Vivihung
Copy link

My project is also facing this issue.
It can be repro in both mobile and desktop safari.
My repro step is:

  • clear all the browser cookie/download files/history
  • go to my website

Then I can see font icon are missing in my web page.
In safari inspector network tab, there is no network traffic for .woff2.

However, if you refresh the page, the issue will be gone.
(Verified the icon shows up in the page, and see .woff2 was downloaded in inspector)

My repro env info:
iPhone: iOS 10.3 | Mobile Safari 10.0
Mac: Mac OS X 10.12 | Safari 10.1
Fabric:
"office-ui-fabric-core": "5.1.0",
"office-ui-fabric-react": "2.25.0",

@Vivihung
Copy link

@ericthompson and @leddie24 ,
Could you please reopen this case? I still can repro it.
I will work with you to repro the issue and find the fix.

@mikewheaton mikewheaton reopened this Aug 24, 2017
@mikewheaton
Copy link
Contributor

mikewheaton commented Aug 24, 2017 •
edited

I'm not able to repro this in Safari for macOS, but I do see the issue on Safari for iOS:
image

I tried inspecting my iPhone using Safari on macOS, but it's not working. Apparently, it could be because I'm not using an official Apple cable? 😩 I'll try again when I'm at home. There must be something unique about this web app because the icons load fine on the Fabric website and in other apps.

@Vivihung
Copy link

@mikewheaton I don't know the cable matters for debugging. O.O

I wonder if it's similar to this issue
https://stackoverflow.com/questions/29696700/font-awesome-icon-not-displaying-in-safari-and-ipad
I will try adding cache buster in my PPE env to see if it resolves the issue.

@mikewheaton
Copy link
Contributor

@Vivihung Were you able to solve this issue?

@mikewheaton mikewheaton changed the title Icons not loading in safari browser. Icons not loading in Safari Oct 3, 2017
@Vivihung
Copy link

Vivihung commented Oct 3, 2017

@mikewheaton, thanks for checking back.
After upgrade to
"office-ui-fabric-react": "5.1.0"

And call init icon in app bootstrap
initializeIcons();

I cannot repro the issue in iOS.
Will check macOS tonight and reply.

@Vivihung
Copy link

Vivihung commented Oct 5, 2017

Not repro in macOS, too.
Feel free to close this issue.

@mikewheaton
Copy link
Contributor

I have no idea what changed there, but I'm glad to hear it's working. 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@patrickabel @leddie24 @mikewheaton @ericthompson @Vivihung @Chethansannju