Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

broken unicode character hash navigation #12684

Closed
vhtmui opened this issue Sep 18, 2024 · 2 comments · Fixed by #12699
Closed

broken unicode character hash navigation #12684

vhtmui opened this issue Sep 18, 2024 · 2 comments · Fixed by #12699
Labels
bug Something isn't working

Comments

@vhtmui
Copy link

vhtmui commented Sep 18, 2024

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
Copy link
Contributor

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

@vhtmui
Copy link
Author

vhtmui commented Sep 21, 2024

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.

@eltigerchino eltigerchino changed the title Bug about the same page navigation. broken unicode character hash navigation Oct 11, 2024
@eltigerchino eltigerchino closed this as not planned Won't fix, can't repro, duplicate, stale Oct 11, 2024
@eltigerchino eltigerchino reopened this Oct 11, 2024
@eltigerchino eltigerchino added the bug Something isn't working label Oct 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
4 participants