Breaks Blazor

[clamchoda]

This pretty much breaks Blazor on iOS Safari 15.5. Any styles defined by Blazor are removed on first render.

On a blank Blazor Server project add the <style> tag and code tag to MainLayout.razor as seen below. Only after adding the javascript reference to _Layout.cshtml you'll see the background is no longer red on iOS Safari 15.5.

When I inspect the device remotely, I can see the root variables are removed. Sometimes you can see a slight flicker of red before the library kicks in.

@inherits LayoutComponentBase

<PageTitle>MobileContainerPolyfil</PageTitle>


<style type="text/css">
    :root{
        @BackgorundColor
    }

    body{
        background: var(--bg-color);
    }
</style>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>


@code
{
    public string BackgorundColor { get; set; } = "--bg-color: red";
}