sveltejs / kit

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

Bug about the same page navigation. #12684

Open vhtmui opened 5 days ago

vhtmui commented 5 days ago

Describe the bug

My web page has a problem with same-page links (eg:<a href="#五five">五</a>) when developed with SvelteKit or when using the static files built by SvelteKit.

The issue manifests as follows: When clicking on a link on this page, if the link contains Chinese characters, it will scroll to the specified ID position the first time you click. However, if you manually scroll to another location and then click the same link again, it will not scroll.

This does not happen when the link is in English or numbers, and it also works properly with chinese chars when using other web proxies such as Nginx.

Reproduction

This is a demo, try click-scroll-click every link then u can easily find out the problem.

<nav>
    <a href="#一">一</a>
    <a href="#2">2</a>
    <a href="#three">three</a>
    <a href="#4">四</a>
    <a href="#五five">五</a>
</nav>
<div class="scroll-container">
    <div class="scroll-page" id="一"><a href="#一">一</a></div>
    <div class="scroll-page" id="2">2</div>
    <div class="scroll-page" id="three">three</div>
    <div class="scroll-page" id="4"><a href="#4">四</a></div>
    <div class="scroll-page" id="五five"><a href="#五">五</a></div>
</div>

<style>
    a {
        display: inline-block;
        width: 50px;
        text-decoration: none;
    }
    nav,
    .scroll-container {
        display: block;
        margin: 0 auto;
        text-align: center;
    }
    nav {
        width: 339px;
        padding: 5px;
        border: 1px solid black;
    }
    .scroll-container {
        width: 350px;
        height: 200px;
        overflow-y: scroll;
        scroll-behavior: smooth;
    }
    .scroll-page {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100px;
        font-size: 2em;
    }
</style>

Logs

No response

System Info

none

Severity

serious, but I can work around it

Additional Information

No response

henrikvilhelmberglund commented 2 days ago

Can you share a repro on stackblitz or something? I tested in sveltelab and it worked there.

vhtmui commented 2 days ago

Can you share a repro on stackblitz or something? I tested in sveltelab and it worked there.

I run this demo on stackblitz, and it's ok.

But when I tried it on the svelte REPL or my local svelte project make by sveltekit, things got weird. REPL
sveltekit project

I used the same procedure: click link 1, scroll to the bottom, click link 1 again. But the result is different.

  1. REPL on Edge, it doesn't scroll.
  2. REPL on Firefox, it do scroll.
  3. In project build by sveltekit, it doesn't scroll on either Edge or Firefox.