Sheet with anchor links not working properly on mobile

[VerburgtJimmy]

Describe the bug

I want to close the sheet when clicking on a link in my menu that has a anchor. So the sheet needs to close and then the page scroll to the clicked anchor.

I have the same bug as in the react shadcn see this issue: shadcn-ui/ui#844

The provided answer on that issue doesn't work for this svelte version.

Does someone have the same issue.

ps. My code does work on a pc how i expect it to work but just not on a ios Iphone like the issue with the react version.

Reproduction

https://stackblitz.com/edit/github-hworis?file=src%2Froutes%2F%2Bpage.svelte

This reproduction doesn't work. the stackblitz doesn't do anchors for some reason but you can get the idea i am going for.

Logs

No response

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 787.34 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.2.0 - /opt/homebrew/bin/node
    npm: 10.7.0 - /opt/homebrew/bin/npm
    pnpm: 9.2.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.114
    Edge: 126.0.2592.68
    Safari: 17.5
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.10 
    bits-ui: ^0.21.10 => 0.21.10 
    cmdk-sv: ^0.0.17 => 0.0.17 
    lucide-svelte: ^0.381.0 => 0.381.0 
    mode-watcher: ^0.3.1 => 0.3.1 
    svelte: ^4.2.7 => 4.2.17 
    svelte-sonner: ^0.3.24 => 0.3.24

Severity

annoyance

[VerburgtJimmy]

Is there someone with the same issue or does someone have a easy solution?

[huntabyte]

Bumping isn't going to get the issue addressed any faster.

[Plorenzo]

This is also happening to me with a <Sheet.Content side="bottom"> with several a links inside, the scroll never resets to the top.

<a
   onclick={(e) => {
	dialogOpen = false;
	e.preventDefault();
}}
    href="/como-funciona" class="block p-2 hover:text-indigo-600">{m.late_agent_salmon_dine()}</a>                          

despite trying I haven't been able to find a workaround/

still happens if the <a> is changed to button with a goto

<button
	onclick={(e) => {
		dialogOpen = false;
		goto('/servicios');
	}}
	class="block p-2 hover:text-indigo-600">{m.caring_early_lamb_fall()}
</button>

[VerburgtJimmy]

I have a pretty nasty workaround but for my case it is working fine for what it is supposed to be.

You need to put your links with the link of each item in the main layout so outside your sheet component.

Then I will put a button in the sheet for each sheet item like this:

<Button variant="link"
					on:click={clickService}
					class="text-foreground transition-colors hover:text-primary justify-start text-lg font-medium"
					>link 1</Button
				>

Then this will call a function which will close the sheet and then go to the link with a delay which seems to fix the issue for me but at large scale this wouldn't be sufficient:

function clickService() {
// Just put a ID on the close sheet button that is on your sheet.
		document.getElementById('closeDialog')?.click();
		// document.getElementById('about')?.focus();
		setTimeout(() => {
			document.getElementById('serviceLink')?.click();
		}, 400);
	}

It is still not perfect but for my use case that doesn't really matter for now but i hope this gets a official fix

[sejoalfaro]

Additional Comments and Findings

I encountered a similar issue when using the Sheet component from shadcn-svelte with anchor-based navigation (href="#section") or buttons triggering a scrollIntoView() call. The scroll action fails on iOS devices (Safari and Chrome), likely because the target section is not fully rendered at the time of the scroll attempt.

---

Temporary Solution

As suggested by @VerburgtJimmy, wrapping the scrollIntoView() call in a setTimeout resolves the issue by introducing a slight delay, ensuring the target element is fully rendered before scrolling:

setTimeout(() => {
  targetElement.scrollIntoView({
    behavior: 'smooth',
    block: 'start',
  });
}, 400);

Context and Environment

Framework: Astro
Version: Svelte 5
Browser: iOS (Safari, Chrome)
Devices Tested: iPhone 12 (iOS 18.0.1)

Thank you ❤️ @VerburgtJimmy