Svg `title` and `text` tags conflict with Blazor `title` / `text` tags

mitkins commented 2 years ago

Is there an existing issue for this?

[X] I have searched the existing issues

Describe the bug

I'm in the process of migrating our Blazor Server app from .net 5 to .net 6 when I noticed a little quirk with the page title. On pages where I haven't used the <PageTitle /> component, it would show the word "Menu".

After some investigation, it appears that Blazor is picking up the <title>Menu</title> element from an svg I have in my site navigation (which is at the beginning of every page)!

Expected Behavior

Which was a little surprising! I thought that the page title would only be affected by the head/title element or the PageTitle component. At the very least it should ignore the title element of an svg.

Steps To Reproduce

Create a new Blazor Server app - choose .net 6 (and default options)
Remove the PageTitle component from MainLayout.razor and Index.razor
Add the following svg - in either MainLayout.razor or Index.razor

<svg height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg>

Exceptions (if any)

No response

.NET Version

6.0.300-preview.22154.4

Anything else?

I'm using Visual Studio 2022 17.1.3 I also have Visual Studio 2022 17.2.0 Preview 2.1 - which I think explains the .net version (above)

Output from dotnet --info:

.NET SDK (reflecting any global.json):
 Version:   6.0.300-preview.22154.4
 Commit:    1eb22793b6

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.19044
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\6.0.300-preview.22154.4\

Host (useful for support):
  Version: 6.0.3
  Commit:  c24d9a9c91

.NET SDKs installed:
  3.1.417 [C:\Program Files\dotnet\sdk]
  5.0.104 [C:\Program Files\dotnet\sdk]
  5.0.212 [C:\Program Files\dotnet\sdk]
  5.0.406 [C:\Program Files\dotnet\sdk]
  6.0.201 [C:\Program Files\dotnet\sdk]
  6.0.300-preview.22154.4 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.All 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.14 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.17 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.14 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.15 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 6.0.2 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 6.0.3 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.1.26 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.14 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.17 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.23 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.8 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.14 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.15 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.2 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.3 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.1.13 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.1.14 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.1.17 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.1.23 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.5 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.8 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.14 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.15 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.2 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.3 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

javiercn commented 2 years ago

@mitkins thanks for contacting us.

If you copy the markup from the browser, save it into an HTML document and open that document, does it reflect the title too? (Could you copy/paste said markup here)

ghost commented 2 years ago

Hi @mitkins. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

mitkins commented 2 years ago

Sure thing! I dumped out the page source and loaded the following in a .html file. The title in that case was the name of the file:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="BlazorApp2.styles.css" rel="stylesheet" />
    <!--Blazor:{"sequence":1,"type":"server","prerenderId":"c3f3369ab6134ea6b91f3a4ef994ba25","descriptor":"CfDJ8AcVUDDZF9ZArDR7aIG0GbjZDZ\u002Bl0oBIyLwObH1Ejzb5w7DRbcjNM8icbWHJl9GAY8PMkuaEE1j51eu59o\u002B93uXWQsilWTmd3XJOLZ1\u002Bws5HBO7m3NXMGpBFhvG3/FRVCXugoMwjvWD2Uw2qR4hHP4dAIZpPhm/um5yVFtBxETHIF9gfrZ48HMiuOpvAqMisQnH8juiKLf7YE\u002BNObF1sZhgjOWlapHiWrPvvVtc5SLpUzla4DmBzEmZQQ7iITr9ugDo4N46dPr2ad14xZJg2OxO/7jFwUCuxJ8WbbJczg\u002BTzSflCdt5QKdE0PEoeUz\u002BalX/R5qUlFSY7fVJglbDEX7vakRsm2mKJVk\u002BeDqiAa8WHdrkBogQwfLiPPj7N0zCb/0V3D45XRftC91Jk5\u002B/5bDBJjrq2BbXhKfvsF0HkR7Od"}--><!--Blazor:{"prerenderId":"c3f3369ab6134ea6b91f3a4ef994ba25"}-->
</head>
<body>

<!--Blazor:{"sequence":0,"type":"server","prerenderId":"1ab1576a997540dcab4320170f7a9d82","descriptor":"CfDJ8AcVUDDZF9ZArDR7aIG0GbiHxTVZroGHvmAHoJYA1KD\u002B7PP\u002B1lmQlkEFmXAUjtEJAo0gsF3wal1G1e8Zkzri6HlCsF5aaJh9aYvPVG10deKJVWjil2yXQJnRpF1oFqBbDny34JTrtx65UugxJCYtuKG\u002BHPB3cKchcXINRNuqBXs6KwLFDocRjScgzKkECJ0A\u002BKcvI9sHrL/HbopVSxpUjXITv1Y0MBmchD1rZ2KHf6ISvNWkkri\u002Bvj05vgTACW1\u002BYat2cT4ZI2MvXiNTBaAq/7lL6Z/TCLlvVcrxATzE2iEK\u002BbZug\u002B7JhMe9f7H6GMG8sJzg\u002Bq/Wfdz9lovPYDNbG8fT5MasQmyDz9fQjTHR6FHp"}--><svg height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" b-g438hy8nqh><title b-g438hy8nqh>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" b-g438hy8nqh></path></svg>

<div class="page" b-g438hy8nqh><div class="sidebar" b-g438hy8nqh><div class="top-row ps-3 navbar navbar-dark" b-8klt50xt3z><div class="container-fluid" b-8klt50xt3z><a class="navbar-brand" href b-8klt50xt3z>BlazorApp2</a>
        <button title="Navigation menu" class="navbar-toggler" b-8klt50xt3z><span class="navbar-toggler-icon" b-8klt50xt3z></span></button></div></div>

<div class="collapse" b-8klt50xt3z><nav class="flex-column" b-8klt50xt3z><div class="nav-item px-3" b-8klt50xt3z><a href="" class="nav-link active"><span class="oi oi-home" aria-hidden="true" b-8klt50xt3z></span> Home
            </a></div>
        <div class="nav-item px-3" b-8klt50xt3z><a href="counter" class="nav-link"><span class="oi oi-plus" aria-hidden="true" b-8klt50xt3z></span> Counter
            </a></div>
        <div class="nav-item px-3" b-8klt50xt3z><a href="fetchdata" class="nav-link"><span class="oi oi-list-rich" aria-hidden="true" b-8klt50xt3z></span> Fetch data
            </a></div></nav></div></div>

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

        <article class="content px-4" b-g438hy8nqh><h1>Hello, world!</h1>

Welcome to your new app.

<div class="alert alert-secondary mt-4"><span class="oi oi-pencil me-2" aria-hidden="true"></span>
    <strong>How is Blazor working for you?</strong>

    <span class="text-nowrap">
        Please take our
        <a target="_blank" class="font-weight-bold link-dark" href="https://go.microsoft.com/fwlink/?linkid=2149017">brief survey</a></span>
    and tell us what you think.
</div></article></main></div>
        <!--Blazor:{"prerenderId":"1ab1576a997540dcab4320170f7a9d82"}-->

    <div id="blazor-error-ui">

            An unhandled exception has occurred. See browser dev tools for details.

        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

TanayParikh commented 2 years ago

I believe this may be a compiler issue. We have a similar problem with <text> tags within SVG conflicting with the Blazor <text> tag.

https://social.msdn.microsoft.com/Forums/en-US/b7941c81-56e6-4223-84e8-c4bc1a31c636/svg-text-tag-in-foreach-loop?forum=aspmvc&prof=required

[requires permissions to access] https://dev.azure.com/devdiv/DevDiv/_workitems/edit/1509964

TanayParikh commented 2 years ago

@mitkins can you please try the following as a workaround?

<svg height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><text><title>Menu</title></text><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg>

or:

<svg height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    @: <title>Menu</title>
    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>

mitkins commented 2 years ago

I tried the first option, adding the <text> element didn't help. When I try the second option, I get a red squiggly line on the :

This is the error:

RZ1005 ":" is not valid at the start of a code block. Only identifiers, keywords, comments, "(" and "{" are valid

TanayParikh commented 2 years ago

Okay thanks for trying it out. I was basing that off of one of the solutions in https://social.msdn.microsoft.com/Forums/en-US/b7941c81-56e6-4223-84e8-c4bc1a31c636/svg-text-tag-in-foreach-loop?forum=aspmvc&prof=required.

chrdlx commented 2 years ago

I can reproduce this issue, I had to remove the

<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>

tag from the default _Layout.cshtml template to avoid the bug. It seems that component erases tags from the whole html... if I make a change in a component and trigger a hot reload, the <title> tags appear again.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

dotnet / razor