[Resolved] Firefox: Menu Hamburger and "Scroll to Top" button do not display.

[Izzy]

Hello!
For some odd reason in Firefox, when resized for mobile, the mobile menu Hamburger and “Scroll to Top” button do not display. Instead, there are a few txt symbols.You can see what I am referring to here:

https://itninjas.tech/

I initially thought this was an issue with Firefox Focus on my droid device but the issue can be reproduced using my mac/Firefox 65.0.1 (64-bit).Note that everything looks fine in Chrome. Any thoughts as to why this is occurring?

Your reply is greatly appreciated.

-Izzy

[David]

Hi there,

i tested this on desktop and iOS firefox and not seeing the issue.
If you can right click and inspect the page and see if any errors are showing in the console.

[Izzy]

Interesting! I tested this in the Firefox 65.0.1 (64-bit) desktop app. There seems to be an issue with the way Firefox is handling the GP font:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://itninjas.tech/wp-content/themes/generatepress/fonts/generatepress.woff2. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://itninjas.tech/wp-content/themes/generatepress/fonts/generatepress.woff. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://itninjas.tech/wp-content/themes/generatepress/fonts/generatepress.ttf. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]

I’m guessing that the glyphs for the “Back to Top” and “Hamburger” are part of the generatepress.ttf

Chrome has no such error. Clearing my caches has no effect.

[Izzy]

I’s curious that you cannot reproduce on the desktop. On my droid, the Firefox official app (not Firefox Focus) it loaded fine. Still seeing the console error on the desktop though… odd.

[Tom]

Hi there,

Typically that means the resource (the font) is coming from a URL that is different than the one you’re visiting.

In this case, it doesn’t seem like that’s what’s happening.

When I use Firefox, I’m not noticing any issues.

If you Google “Cross-Origin Request Blocked CORS header Access-Control-Allow-Origin missing firefox” you’ll find quite a few resources with different suggestions. Most of them have to do with your server configuration.

[Izzy]

Thank you everyone. I actually enable some cache as a work around and it seems to be working. I’ll test the COR entry for my .htaccess files. Thanks again!

[Tom]

No problem 🙂

[Author]

Posts