[Blazor] Microsoft Edge translation causes crash because of DOM manipulation

scandler commented 1 year ago

Is there an existing issue for this?

[X] I have searched the existing issues

Describe the bug

Create new project in Visual Studio from Blazor WASM App template with authentication. Run in Edge. On my machine, Edge translates English to Dutch which results in console errors:

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Cannot read properties of null (reading 'removeChild') TypeError: Cannot read properties of null (reading 'removeChild')

and application is stuck on "Authenticating..." (or "Machtigen" translated by Edge)

Expected Behavior

Translation will work or translation blocked by default, preventing DOM manipulations

Steps To Reproduce

I think to reproduce it on a machine with an English Edge and Windows etc: the best way is to force the page into another language is by changing to in the wwwroot/index.html

Exceptions (if any)

No response

.NET Version

7.0.103

Anything else?

No response

javiercn commented 1 year ago

@scandler thanks for contacting us.

This is something that you should be able to control in your markup with <html translate="no" />

scandler commented 1 year ago

@scandler thanks for contacting us.

This is something that you should be able to control in your markup with <html translate="no" />

It should, but it doesn't. What does work is adding: <meta name="google" content="notranslate" /> which is rather strange for being Edge.

But if this is the solution, to prevent the app from being translated, shouldn't it be part of the default blazor template? It will occour on every non-English machine I guess.

javiercn commented 1 year ago

@scandler that's likely the case because: 1) It's based on chromium. 2) Edge wants to understand the same web idioms.

ghost commented 1 year ago

To learn more about what this message means, what to expect next, and how this issue will be handled you can read our Triage Process document. We're moving this issue to the .NET 8 Planning milestone for future evaluation / consideration. Because it's not immediately obvious what is causing this behavior, we would like to keep this around to collect more feedback, which can later help us determine how to handle this. We will re-evaluate this issue, during our next planning meeting(s). If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact work.

driesbolsZF commented 1 year ago

Same issue occurs when a user translates the page in chrome

ghost commented 12 months ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

mkArtakMSFT commented 9 months ago

We'll try to see how some other frameworks behave here and go from there.

ghost commented 9 months ago

To learn more about what this message means, what to expect next, and how this issue will be handled you can read our Triage Process document. We're moving this issue to the .NET 9 Planning milestone for future evaluation / consideration. Because it's not immediately obvious what is causing this behavior, we would like to keep this around to collect more feedback, which can later help us determine how to handle this. We will re-evaluate this issue, during our next planning meeting(s). If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact work.

MarcoTheFirst commented 7 months ago

I ran into this problem in a production system, and it took us 4 days to figure out what the heck was going on. Here's how we fixed and prevented it for good:

<html translate="no">

<meta name="google" content="notranslate">

<body class="notranslate">

And if you want to go the extra mile, you can watch a div for undesired inner structural changes, thereby catching any undesired auto-translator action. Add the following div to the static part of your html body (outside the app-div):

<div id="google-translate-trap">
    <p>This text is being watched for automatic translation.</p>
</div>

add the following css:

#google-translate-trap {
    opacity: 0.1; /* Makes the element fully transparent */
    position: absolute; /* Takes the element out of the normal document flow */
    width: 1px; /* Minimal width */
    height: 1px; /* Minimal height */
    overflow: hidden; /* Ensures no content spills out */
    pointer-events: none; /* Prevents interaction */
    user-select: none; /* Prevents text selection */
}

And finally, add the following JS code to your html page, or to an external script file:

<script type="text/javascript">
    function observeChanges(elementId, onchange) {
        var targetNode = document.getElementById(elementId);
        if (!targetNode) {
            return;
        }

        var config = { childList: true, subtree: true, characterData: true };

        var callback = function (mutationsList, observer) {
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList' || mutation.type === 'characterData') {
                    onchange();
                    break;
                }
            }
        };

        var observer = new MutationObserver(callback);
        observer.observe(targetNode, config);

        return {
            disconnect: function () {
                observer.disconnect();
            }
        };
    }

    function autoTranslateDetected() {
        window.alert("You are using an automatic translator, like google chrome translator. This will cause unexpected errors on this site. Please deactivate all translators and other plugins which may directly modify the content of the page.");
    }

  observeChanges("google-translate-trap", autoTranslateDetected);

</script>

You may want to make the message prettier, maybe even calling Blazor via JS interop. But remember that Blazor may already be "dead" once the translator has changed the DOM. So I opted for a plain JS alert box.

dotnet / aspnetcore