Blazor Server shows empty page in modern browsers

Question

I am running a blazor server website at http://dev.softwaretechnik.it

Unfortunately the following are the minimum browser version requirements.

• Firefox 78 (2020-06-30 !!) (current is 84)
• Edge 80 (2020-02-07 !!) (current is 87)
• Opera 53 (2018-05-12 !) (current 71)
• Chrome 66 (2018-04-17 !) (current 87)

Older versions will just show a blank page. What?!

Could it be caused by css isolation feature of NET 5?

EDIT: see my answer below.

The site is an open source community project hosted at GitHub.

_Host.cshtml: https://github.com/CleanCodeX/WebApp.SoE/blob/main/Pages/_Host.cshtml

Startup.cs: https://github.com/CleanCodeX/WebApp.SoE/blob/main/Startup.cs

The rest is pretty much standard.

Any clues what's going wrong here?

Answer 1

curious, although firefox 77 cannot load blazor.server.js, the below script says that it supports a bunch of ES6 features.

What feature is Firefox lacking which prevents loading Blazor lib?

function HasEs6Support() {
    "use strict";

    if (typeof Symbol == "undefined") return false;
    try {
        // Arrow functions support
        () => {};

        // Class support
        class __ES6FeatureDetectionTest {
        };

        // Object initializer property and method shorthands
        let a = true;
        let b = {
            a,
            c() {
                return true;
            },
            d: [1, 2, 3],
        };

        // Object destructuring
        let { c, d } = b;

        // Spread operator
        let e = [...d, 4];

        return true;
    } catch (e) {
        return false;
    }
}

furthermore, according to the featurelist at https://kangax.github.io/compat-table/es6/

there is NO difference between firefox 77 and 78. But the difference is, 78 loads the page correctly, where 77 does not.

I don't know why.