#fontface not loading properly after page refresh - javascript

I have a page that draws a string to a canvas, using a font loaded through #font-face.
To wait for the font to load, I used:
https://stackoverflow.com/a/11688948/746269
Which works fine in firefox,
and works in chrome/opera the first time the page is opened
but once I refresh the page, and try to run the same code
it ends up drawing in the default "font not loaded" font
until I run the code a second time.
Unless I open a new window or right click on refresh and choose 'Empty Cache and Hard Reload',
It will always fail the first time through.
I figured perhaps some variable was sticking around between refreshes,
but when I step through despite all values being correct, it draws the default font.
I can't just tell the client to not refresh the page and I can't see a solution at all.
Any help would be greatly appreciated :)

I solved it by adding this into the html
Found out that webkit loads fonts differently to firefox and IE, loading them at the first instance of their use in the html.
<div style="font-family: MyFontName; visibility: hidden; height: 0px; width:0px;">a</div>

I faced the same issue and I just solve it by referencing ModernizerJS script in my page.

Related

Why does Firefox lag using NVDA on a page setting textContent?

Recently I've been testing my website using screen readers and ran into a page that lags like crazy when using NVDA. More specifically:
All browser actions are substantially delayed, but NVDA itself runs perfectly fine
For example, the page normally loads in its entirety in less than a second, but with NVDA active, the first image can take several minutes to render
Refreshing the page takes several minutes to execute
Even switching or closing the tab takes several seconds
After some extensive debugging, I isolated the issue into a rather specific set of criteria causing the slowdown:
This only happens on Firefox (I'm currently on Firefox 90); Chrome and Edge are fine
This only happens with NVDA; VoiceOver on Mac is fine even on Firefox. I do not have JAWS.
The action causing a slow down is setting an element's textContent on every requestAnimationFrame, so it's happening dozens of times per second
I am uncertain if this is experimentally significant, but I'm running on Windows 10 Home
I managed to scrape together a minimal CodePen example. I used CodePen here because the simplest way I could replicate the issue was by refreshing the page. In the example is a refresh button that activates a spinner, so if the page is fast the spinner will show up for only a brief moment; if it's slow then you'll get to observe the spinner in all its glory.
What I see when I try to refresh:
So while I isolated what is causing the issue, I have no idea why this is happening and hence how to solve my original page's problem without deactivating the widget outright.
What might be the underlying cause(s) of Firefox/NVDA slowing down on a page setting textContent?
Is there an alternative to setting textContent that I can or perhaps should consider?
Is this perhaps an issue that should be filed directly with either Firefox, NVDA, or both?
Thank you!
Addendum:
NVDA Github Issue: This open issue indicates long pages are slow to load, which may be related to my problem
My Website's Page: The page on my website I'm talking about

Styles and text not loading on safari

I am having a weird issue and not been able to figure out what's causing this.
This is my web page for example https://modern-woodmen-sandbox.everfi-next-sandbox.net/student/dashboard/mwasandbox/3-5-grade-band/152?locale=en
It works fine on every browser other than Safari on Mac. The issue is, when I land on this page, it shows a blank screen. And if I click anywhere on the page, it renders some stuff but not all.
Like it shows this
And if I refresh the page, it loads the content fine and the way I expect.
Really appreciate your thoughts in this.
Thanks
It works fine on Chrome tho.
Make sure your 'Source Sans Pro' fonts are loading properly.

Javascript carousel not loading properly under some conditions?

So I've been working on a website, and the main focus of the site is a javascript-driven 3D carousel, and I got the code for the carousel from here: https://github.com/kaizouman/3dcarousel
I integrated the code into my site, and only modified the number of carousel items and the size of each item. I left the rest of the code untouched (demo.js and 3dcarousel.js). It works perfectly, but only most of the time. I've noticed that it'll work perfectly in Chrome about 90% of the time, in Safari about 80% of the time, and in Microsoft Edge & IE, it pretty much never works. When it doesn't work, it just loads each image individually. When it happens in Chrome, if I keep refreshing the page, it'll eventually work properly. Also interestingly, when I navigate to another page in Chrome and then hit the back button, the carousel will always fail to load.
Here's what it looks like in Microsoft Edge and also when it fails to load in Chrome:
And here's what it looks like when it loads properly:
I can't for the life of me begin to figure out why this is happening, does anyone have any idea? The website is located at http://lipocircuit.com/new.html.
WOW this was a simple fix, I just commented out the line that includes the prefixfree.min.js script, I guess that's outdated and not needed anymore. I feel dumb but I'll leave this up in case anyone else has this issue.

JavaScript Prepended Content Not Showing On Anchor Click In Safari

I'm working on a project in WordPress that is utilizing the Theme Customizer to assist other people working on the site with me. We're dynamically loading in a lot of content and options like Google Fonts, so the loading of the Customizer takes a few seconds to fully load (lingers on the admin page, then after a few seconds progresses to the /customize.php page).
Because of this, I wanted to add a simple "Customizer Loading" message that would pop up to let users know that something was happening. Everything works fine in Chrome and Firefox, but Safari and Internet Explorer (as far as I can tell from testing in Sauce) are giving me problems.
I'm using the following bit of JavaScript to add the loading message:
$('a[href="customize.php"]').click( function() {
$('head').prepend('<style type="text/css"></style>');
$('body').prepend('<div id="loading-message"></div>');
});
Inside the <style type="text/css"> block I simply included my styles and then <div class="loading-message"></div> is where I placed my content.
What is happening in Safari (and again, IE from what I can tell) is that when ... is clicked, the styles and content are getting added to the DOM (I can see them when I inspect the page), but they don't actually become visible, whereas in Chrome and Firefox they do.
If I use e.preventDefault() on the link, the loading message shows up just fine. Other events, like alert() and console.log() register fine, and the link will continue on through as expected. It's only the new content getting added to the DOM that doesn't become visible.
I can't figure out exactly what could be causing this and would greatly appreciate any help. I tried recreating the problem in JSFiddle, but I couldn't replicate the same result I'm getting in the WordPress Admin Panel (if you change out $('a[href="customize.php"]') for any other slug in the backend like "themes.php", it has the same result though).

Firefox and IE continue to load after content has been inserted into a DIV

I have a situation where I'm inserting javascript generated HTML code into a DIV. One would think this would be a no brainer, but for some reason, once the code is in, the status bar and tab loading graphics start up in both browsers and never stop again. The page continually appears to be loading data, but in reality, there's nothing more to load. Any idea why this may be happening? Solutions? I appreciate any help. Thanks!
Install the Firebug plug-in for Firefox. Open it up and got to the NET tab. That will allow you to see your network activity. Something on the server may be stalling. This will help you find it.

Categories