sveltejs / kit

web development, streamlined
https://kit.svelte.dev
MIT License
18.1k stars 1.83k forks source link

Sveltekit build not rendering HTML properly #12252

Open mellunar opened 1 month ago

mellunar commented 1 month ago

Describe the bug

When building the code to production, Sveltekit is not rendering the code as it's supposed to be.

This is how my code looks like in editor: sveltekit1

When previewing it with 'npm run dev', it renders the code properly: sveltekit2

But after building it to production, this is how it's rendered into view: sveltekit3

In the last picture, the div is outside the anchor tag, causing the layout to be broken, and another anchor tag is created inside it.

Reproduction

Create a project, add an anchor tag on a page, then insert content into a div inside it, and build/preview the project.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 21.48 GB / 31.93 GB
  Binaries:
    Node: 20.13.0 - ~\.nvm\versions\node\v20.13.0\bin\node.EXE   
    npm: 10.5.2 - ~\.nvm\versions\node\v20.13.0\bin\npm.CMD      
  npmPackages:
    @sveltejs/adapter-auto: ^3.2.0 => 3.2.0
    @sveltejs/kit: ^2.5.9 => 2.5.9
    @sveltejs/vite-plugin-svelte: ^3.1.0 => 3.1.0
    svelte: ^4.2.17 => 4.2.17
    vite: ^5.2.11 => 5.2.11

Severity

annoyance

Additional Information

No response

eltigerchino commented 1 month ago

Please provide a minimal reproduction in the form of a downloadable repository. Otherwise, I’m inclined to think this is an issue with how browsers handle anchor tags nested in other anchor tags. A similar issue to this is https://github.com/withastro/astro/issues/4864

brunnerh commented 1 month ago

It is not a browser issues, this is just invalid according to the spec.

Content model: Transparent, but there must be no interactive content descendant, a element descendant, or descendant with the tabindex attribute specified.