yetkinreport.com - Page doesn't load

[webcompat-bot]

URL: https://yetkinreport.com/

Browser / Version: Firefox Mobile 85.0 Operating System: Android Tested Another Browser: Yes Other

Problem type: Something else Description: Stuck at loading animation Steps to Reproduce: Just start navigating in the website, some times even tough page loads fully on the line indicator above urlbar, websites' loading animation keeeps circling.

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20201223151005
• channel: beta
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue. If "Settings>Site permissions>Autoplay" is set to "Block audio and video", the site never loads.

Note:

1. The issue is not reproducible on Chrome.
2. Setting "Block audio and video on cellular data only" option, the page loads.

Console:

Tested with: Browser / Version: Firefox Nightly 201223 (🦎 86.0a1-20201222093533) Operating System: Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density), Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density)

Moving to Needsdiagnosis for further investigation.

[wisniewskit]

I can only reproduce this once in a while when the debugger isn't open (also in the responsive design mode). That's a dead ringer for a script race condition. This seems to be the code where the page loader is hidden:

MachoThemes.initPreloader = function(a) {
    a(window).load(function() {
        var b = a(".page-loader")
          , c = b.attr("data-effect");
        switch (c) {
        case "slide":
            b.find("div").delay(0).slideUp(),
            b.delay(200).slideUp("slow");
            break;
        default:
            b.find("div").delay(0).fadeOut(),
            b.delay(200).fadeOut("slow")
        }
    })
}

But I cannot tell why there would be a race condition from just that much.

[karlcow]

This is the loader

<div class="page-loader" data-effect="fade">
  <div class="loader"></div>
  <span class="loader-text">Loading...</span>
</div>

They use

/*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license | WordPress 2019-05-16 */

and

if (document.readyState === "complete") {
  documentInitOneSignal();
} else {
  window.addEventListener("load", function (event) {
    documentInitOneSignal();
  });
}

@wisniewskit note that the page is loaded, it's just the .page-loader which is not being faded out. (you can see the page by setting display: none on the .page-loader)

Let's push this to needscontact. And I have the feeling that the version of JQuery might be at play too. Maybe. Though they are using jQuery 1.8.3+ https://bugs.jquery.com/ticket/10227 So maybe just the race indeed.

[webcompat-bot]

Generate outreach template

[softvision-raul-bucata]

The issue has been fixed and it is no longer reproducible. regardless of the settings being used:

Tested with: Browser / Version: Firefox Nightly 93.0a1 (2015829675 -🦎93.0a1-20210821212131🦎 Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density)

Closing this as FIXED