Very helpfull ! thanks it fixed the infinite loop for me !
A shame that this fix is not suggest or corrected after a +1 year.
Awesome, glad it helped. Hopefully we get a fix one day.
The posted code from (@carlosatfongo) helped our website a lot by fixing the endless loading issue in Firefox. However, there was still an annoying flashing of the website before the preloader (The problem in Firefox is, reload > flash website > preloader > website visual).
To prevent this blinking and to find an even more reliable solution, I developed the following code for functions.php:
add_action('wp_footer', function() {
?>
<script>
(function($) {
// Check if it is the Firefox browser
var isFirefox = typeof InstallTrigger !== 'undefined';
if (isFirefox) {
// Add a class to hide the website
$('body').addClass('hidden-site');
// Remove the class after a fixed delay before the page is fully loaded
setTimeout(function() {
// Remove the class to show the page
$('body').removeClass('hidden-site');
}, 500); // Change the delay time here as needed (in milliseconds)
}
})(jQuery);
</script>
<?php
});
This code should be placed below the code provided by (@carlosatfongo). The success of this solution was particularly evident when used in conjunction with Dark Mode.
The code couldn’t be effectively combined into a single action because the two actions need to be executed separately within wp_footer, which helps reduce timing conflicts. First, the preloader is hidden, and then the website’s visibility is controlled based on the browser type. This approach minimizes the likelihood of timing-related issues.
Thanks to (@carlosatfongo) for the original code, and thanks to everyone for the support and solution finding.
Hello,
I would like to apologize for my previous attempts to prevent the website from flashing before the preloader in the Firefox browser. Unfortunately, I was not able to solve the problem completely.
Thank you for your understanding.
Darn, i was just about to try your new code too lol
Hello for the feedback 😉 Here is another approach that seems to be a bit more robust:
add_action('wp_footer', function() {
?>
<script>
(function($) {
// Check if it's the Firefox browser
var isFirefox = typeof InstallTrigger !== 'undefined';
if (isFirefox) {
// Hide the website by default
$('body').css('visibility', 'hidden');
// When the page is almost fully loaded, make the website visible again
$(window).on('load', function() {
// Set a minimal delay to ensure the page is fully loaded
setTimeout(function() {
// Set the visibility of the website back to "visible"
$('body').css('visibility', 'visible');
}, 100); // Adjust the delay time as needed (in milliseconds)
});
}
})(jQuery);
</script>
<?php
});
Adjust the delay time: Try different times to find the best setting for your website. However, please note that it can be challenging to find a perfect solution. In some cases, the preloader may not be visible at all, but this will eliminate the flickering. Thank you.
Addendum, and I apologize for the confusion. In summary the following should work:
/* Browser-Specific Handling for Firefox */
add_action('wp_footer', function() {
?>
<script>
(function($) {
// Check if it's the Firefox browser
var isFirefox = typeof InstallTrigger !== 'undefined';
if (isFirefox) {
// Add a class to hide the website
$('body').addClass('hidden-site');
// Remove the class after a fixed delay before the page is fully loaded
setTimeout(function() {
// Remove the class to display the page
$('body').removeClass('hidden-site');
}, 500); // Change the delay time here as needed (in milliseconds)
}
})(jQuery);
</script>
<?php
});
The delay time is set to 500 milliseconds by default, but can be adjusted as needed.
With the previous code and this CSS it should work:
/* CSS code to hide the page */
.hidden-site {
visibility: hidden !important;
opacity: 0 !important;
}
Thanks a lot!
-
This reply was modified 2 years, 6 months ago by
wegerl.
Wow this works really well! Much better than before. It hides my Off Canvas elements now properly. Wicked, thank you!
