Bruno Stasse

Only 2 days left to take advantage of @silkhq.com Black Friday deal!

25% off all commercial licenses.

Get the discount: silkhq.com

Silk — Native-like swipeable sheets on the web — 25% off

Black Friday Deal ✨

Silk is 25% off for one week.

Don't miss it.

In my case the fixed elements (possibly the entire viewport actually, but not noticeable on a normal page) go up and down as I scroll the page. They end up in the right position when Safari's UI is expanded, and too high up when it is collapsed.

Showing the keyboard seems to trigger the behavior.

I noticed a pretty bad bug with fixed elements, they get shifted up sometimes. Relaunching Safari fixes the issue (temporarily).

Does that maybe help with the bad behaviors you've noticed?

Glad it worked!

Page with background parallax.

120fps trackpad swipe animation. Animated header fade. Fully accessible.

On the web, with @silkhq.com

Just added an `updateThemeColor()` function to @silkhq.com that lets you update the page `theme-color` used for the iOS status bar while preserving the dimming that makes it blend with the Sheet's Backdrop.

Pretty useful when you're switching between light/dark mode from within a Sheet!

If you're doing cool stuff with @silkhq.com too, send it my way, I'd love to see it!

There are, but to be honest I'd rather have browser vendors focus on fixing issues and implementing missing features that prevent us from reaching experiences on par with native for now.

I've got a list of things that I've communicated to one vendor. Happy to send it your way if you'd like.

Swipe animations themselves are based on CSS scroll-snap, so there's no JS involved. There is JS around it to make it work as desired though, and to handle the many features and components you need to build such a complete experience. The whole lib is under 40kb gzipped.

As it should be!

This is what the mobile web should have felt like all along.

My goal is to make this the new normal.

Tjek’s eTilbudsavis web app, home to digital catalogs from brands across Scandinavia, is now using @silkhq.com.

It looks great, check it out 👇

Sometimes all you need is a clean, smoothly animated page.

120fps enter/exit animations. Inner scrolling with overshoot. Perfect body scroll locking. Fully accessible.

Made with @silkhq.com, on the web.

Rich in-editor hints for @silkhq.com just shipped!

You now get information about each component, sub-component and prop inline as you type. Learn what is required, what things do and how they compose together without leaving you editor.

Screenshot of Silk's rich hints in VSCode

Coming soon: Rich code editor hints for Silk ✨

You'll know which sub-components are required, how they compose together and what their props do without leaving your editor.

Long scrollable sheet. Swipe up or down to dismiss with your trackpad.

Made with Silk, on the web.

Silk - Native-like swipeable sheets on the web Find out how to get access for commercial and non-commercial usage for Silk, the swipeable and accessible modal sheet component for React.

Silk is getting an upgrade today. It's a letter.

silkhq.co becomes silkhq.com

Love to hear that!

That'd be nice indeed :)

Maybe @jensimmons.bsky.social or @saron.bsky.social can answer your question.

Oh, and someone shared a screenshot of a very common issue here: x.com/jaytel__/sta...

There some (limited) info here and a few screenshots, but they don't quite show how bad it is: bsky.app/profile/jens...

Thing is Apple has not made public any information about that new UI, and the beta agreement forbids the sharing of non-public information, so I'm not sure what I'm allowed to share 😅

The implementation is different from that of iOS 15, so the issues are also a bit different.

I’ll be sending feedback to Apple on a number of issues with the new UI, and I’d encourage anyone testing the beta to do the same. With enough input, hopefully it won’t ship in its current form.

Screenshot of the new Safari, with a label "Doesn't live up to its promise"

Apple says the new iOS Safari is all about an immersive, edge-to-edge experience. But after testing it out, that promise doesn’t hold up.

In fact, beta 1 delivers the least immersive experience ever, unless you only visit websites from the ‘90s when `position: fixed` didn’t exist.

It is possible, but Silk doesn't yet provide tools to position an element above the keyboard and keep it there, so you'll have to do this yourself using the visualViewport API. It can be a bit tricky, so this is definitely something I want to cover in the near future.

Very excited for this. Last time I checked you couldn't pass a function definition (i.e. not a function call, but a function that you can call later with params from another context) to a custom prop. Any chance this has changed?

Sheet with transient detent. The intermediate detent is removed once the sheet reaches the last detent.

Swipe up or tap the input to expand. Scroll to dismiss the keyboard. Swipe down to dismiss the sheet.

Made with Silk, on the web.

The advanced examples made available after purchase of a commercial license have also been updated and can be downloaded here: app.lemonsqueezy.com/my-orders

Send me a email if you struggle to find them.