Skip to content

fix: layout shift behind command+k search #563

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

Merged
merged 1 commit into from
Oct 23, 2024

Conversation

kaevupoiss
Copy link
Contributor

@kaevupoiss kaevupoiss commented Oct 23, 2024

This fixes the layout shift behind cmd+k SearchBox when it is toggled on-off. Words in paragraphs jump and images scale.

  • Added scrollbar-gutter to the html when overflow is hidden by the overlay_open store. This allows body size to remain stable.
  • Changed body positioning from fixed to absolute to account for the scrollbar-gutter.
  • Removed top from frozen body to account for the new positioning.
  • Added local state to the SearchBox because the last scroll position is not stored in the top style declaration of the body anymore.

scrollbar-gutter is not yet supported in Safari, this means the experience is unchanged for Safari users.

Copy link

vercel bot commented Oct 23, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
learn-svelte-dev ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 23, 2024 6:44am
omnisite ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 23, 2024 6:44am

@Rich-Harris
Copy link
Member

Thanks! Code looks good though I'll let someone else (@dummdidumm?) approve the PR since as a Mac user this issue doesn't affect me in the first place. (By the same token, I think it's fine that Safari doesn't support this property, because all desktop Safari users are Mac users)

Copy link
Member

@dummdidumm dummdidumm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks!

@dummdidumm dummdidumm merged commit 8788302 into sveltejs:main Oct 23, 2024
6 checks passed
@kaevupoiss kaevupoiss deleted the fix-layout-shift-on-cmd-k branch October 23, 2024 18:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants