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

scandler · 2023-03-09T13:27:22Z

Is there an existing issue for this?

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 · 2023-03-09T15:14:16Z

@scandler thanks for contacting us.

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

scandler · 2023-03-09T15:22:34Z

@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 · 2023-03-09T15:25:54Z

@scandler that's likely the case because:

It's based on chromium.
Edge wants to understand the same web idioms.

ghost · 2023-03-09T17:37:39Z

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 · 2023-04-25T06:46:05Z

Same issue occurs when a user translates the page in chrome

ghost · 2023-10-04T17:41:28Z

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 · 2023-12-14T18:04:54Z

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

ghost · 2023-12-14T18:05:07Z

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 · 2024-02-19T13:47:45Z

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.

mkArtakMSFT · 2024-11-13T18:39:56Z

Thanks for contacting us.
We couldn't prioritize this investigation given the number of customers are affected. Hence closing this issue.
You can learn more about our triage process and how we handle issues by reading our Triage Process writeup.

dotnet-issue-labeler bot added area-blazor Includes: Blazor, Razor Components untriaged labels Mar 9, 2023

mkArtakMSFT added investigate and removed untriaged labels Mar 9, 2023

mkArtakMSFT added this to the .NET 8 Planning milestone Mar 9, 2023

mkArtakMSFT modified the milestones: .NET 8 Planning, Backlog Oct 4, 2023

mkArtakMSFT modified the milestones: Backlog, BlazorPlanning Nov 5, 2023

MackinnonBuck added the Pillar: Technical Debt label Dec 4, 2023

mkArtakMSFT modified the milestones: Planning: WebUI, .NET 9 Planning Dec 14, 2023

mkArtakMSFT added the Priority:2 Work that is important, but not critical for the release label Jan 9, 2024

mkArtakMSFT modified the milestones: .NET 9 Planning, .NET 10 Planning Jan 30, 2024

MariovanZeist mentioned this issue Apr 20, 2024

Blazor @onclick not working #55225

Closed

1 task

mkArtakMSFT closed this as not planned Won't fix, can't repro, duplicate, stale Nov 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

scandler commented Mar 9, 2023

javiercn commented Mar 9, 2023

scandler commented Mar 9, 2023

javiercn commented Mar 9, 2023

ghost commented Mar 9, 2023

driesbolsZF commented Apr 25, 2023

ghost commented Oct 4, 2023

mkArtakMSFT commented Dec 14, 2023

ghost commented Dec 14, 2023

MarcoTheFirst commented Feb 19, 2024 •

edited

Loading

mkArtakMSFT commented Nov 13, 2024

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

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

Comments

scandler commented Mar 9, 2023

Is there an existing issue for this?

Describe the bug

Expected Behavior

Steps To Reproduce

Exceptions (if any)

.NET Version

Anything else?

javiercn commented Mar 9, 2023

scandler commented Mar 9, 2023

javiercn commented Mar 9, 2023

ghost commented Mar 9, 2023

driesbolsZF commented Apr 25, 2023

ghost commented Oct 4, 2023

mkArtakMSFT commented Dec 14, 2023

ghost commented Dec 14, 2023

MarcoTheFirst commented Feb 19, 2024 • edited Loading

mkArtakMSFT commented Nov 13, 2024

MarcoTheFirst commented Feb 19, 2024 •

edited

Loading