Infinite Loading on Firefox

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 1 year, 3 months ago by wegerl.

Wow this works really well! Much better than before. It hides my Off Canvas elements now properly. Wicked, thank you!