Gregory's Server@bramus I had no idea this was possible but was curious how it works, so I made a quick #codepen of this idea: https://codepen.io/mgrubinger/pen/LYKQaQz
I love how simple (and reliable) this #css solution is!
|
11 comments
 @grooovinger @bramus with and without this scroll snapping. Hoping this is a problem that could be fixed with more CSS? @h I fixed the width, but I can't reproduce the strange behaviour (no iPhone around at the moment, simulator looks fine). Which iOS/Safari version are you on?  @grooovinger @bramus it doesn't seem to work in Firefox unfortunately. Based on Can I Use, `scroll-snap-type` and `scroll-snap-align` are supported, but maybe not these values?   @grooovinger @chfkch Bug Report: https://bugzilla.mozilla.org/show_bug.cgi?id=1914178 Workaround: instead of snapping generated content, you can snap the `:last-child`. @grooovinger @bramus as cool as this is, I think this also breaks inertia scroll on iOS. 🤔 Thanks for building it though, I was curious to implement it myself when I tread the original Toot. 😊 I feel like I’ve read about a similar solution using overflow-anchor somewhere, but I might be mistaken, since that property doesn’t do what I thought it did. 😅 @amxmln I tested it today on a real iOS device. Can confirm that inertia is not the same as without snapping, which I guess makes sense but is still a bit disappointing. Hopefully I'll get around to play with the pen a bit more, maybe this can be fixed. |
@grooovinger @bramus </3 this makes swipe scrolling try to end up lining up with every message on iOS safari, it feels really weird