Wordpress Website not (re-)loading in Firefox
Hi @ all,
our website https://ana-dismissed.de/ is not loading in Firefox, or to be more precise it is loading often but on occasionally not reloading when refreshed. This only happens in Firefox, Safari and other Chrome-based Browsers don't show this, perfectly working there (as far as I could check).
I already checked Firefox developer tools, like console or resource loadings etc. There is no issue I can find. I'm completely lost, no hint at all, why this happens in Firefox only.
Please find a short video here: https://imgur.com/a/31XyiMi
I'm thankful for every hint into the right direction.
Best regards!
Chosen Solution
If you keep the Page Inspector open while reloading and watch the attributes on the
<div id="wrapper" class="thb-page-transition-on">
you should see some animation stuff getting manipulated by the script which fades it in. Mine isn't getting stuck/stopping, but perhaps yours is. The rule that makes the div invisible is this one (100% invisibility):
.thb-page-transition-on {
opacity: 0;
-moz-animation-fill-mode: both;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
To override that (and bypass fading), your custom CSS would be:
.thb-page-transition-on {
opacity: 1;
}
All Replies (5)
Looks like the same issue as reported in this thread where a loader overlay (.thb-page-preloader) isn't removed when the page has finished loading.
- /questions/1320526#answer-1381654 Firefox 84.0.1 (64bit) won't load my website
cor-el said
Looks like the same issue as reported in this thread where a loader overlay (.thb-page-preloader) isn't removed when the page has finished loading.
- /questions/1320526#answer-1381654 Firefox 84.0.1 (64bit) won't load my website
Thanks for the hint! @cor-el
I deactivated pre-loading overlayer in the theme options: https://imgur.com/UiZp0Ps
Now background image is loading, but anything else (maybe JS related) is not working any more: - Headline text animation not loading - Burger Menu does not open the menu anymore - no content below the fold
Here a short video: https://imgur.com/DGJcs6b
Thanks @cor-el for the hint!
I deactivated preloading in the wordpress themes options: https://imgur.com/a/azY2HLS
This lead to loading of the above the fold / viewport website but other issues occured:
on reload: - headline text animations wont work (maybe a JS related issue?) - click on burger menu does not open actual menu - no content is loaded below the fold
Short video about this: https://imgur.com/a/QW3cQKn
I just also added the custom CSS of jscher2000's answer in other thread (https://support.mozilla.org/de/questions/1320526#answer-1381723):
.loaderWrap { display: none !important; }
Chosen Solution
If you keep the Page Inspector open while reloading and watch the attributes on the
<div id="wrapper" class="thb-page-transition-on">
you should see some animation stuff getting manipulated by the script which fades it in. Mine isn't getting stuck/stopping, but perhaps yours is. The rule that makes the div invisible is this one (100% invisibility):
.thb-page-transition-on {
opacity: 0;
-moz-animation-fill-mode: both;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
To override that (and bypass fading), your custom CSS would be:
.thb-page-transition-on {
opacity: 1;
}
@jscher2000 Thanks for your answer!
The reason for the problem seems to have been a bug in the WP Theme itself, at least thats how I interpret the changelog of the last update to the seem:
UPDATE 2.4.0.3 – 01.2021 - Fixes an issue with preloading and page transition effects
I double checked the thb-page-transition-on div in page inspector, it transitions from value 0 to 1, like it should.
Thanks a lot at this point, although the actual issue was solved by the theme author, I did learn a lot and assume to be able to fix this issue by myself in future.
Best wishes!