#CSS has come so far but it still feels so lacking when it comes to overflow and sticky positioning.
sure, you can implement something like the holy grail layout using CSS grid, but that's usually a bad idea, because you give up all the optimizations that the "root scroller" comes with by default (such as keyboard scrolling and pull-to-refresh). https://codepen.io/hi_mayank/pen/GRaZXPg
so instead you're stuck with `position: sticky`, which means you also need to add `z-index`, `background` and `scroll-margin`.
Mayank /
npub1ft…vyzsr
2024-07-19 19:05:33
Author Public Key
npub1ftxguws0g7ujpv2h7tdcu7j0s64u9cq5p5hmqgez27043znrd4csuvyzsrPublished at
2024-07-19 19:05:33Event JSON
{
"id": "5acf6843e2f6bad83285a4cd91908fd908ff9fc6ecbc4fa01b22a1e78450b2d4",
"pubkey": "4acc8e3a0f47b920b157f2db8e7a4f86abc2e0140d2fb02322579f588a636d71",
"created_at": 1721415933,
"kind": 1,
"tags": [
[
"proxy",
"https://front-end.social/@mayank/112814714603460424",
"web"
],
[
"t",
"css"
],
[
"proxy",
"https://front-end.social/users/mayank/statuses/112814714603460424",
"activitypub"
],
[
"L",
"pink.momostr"
],
[
"l",
"pink.momostr.activitypub:https://front-end.social/users/mayank/statuses/112814714603460424",
"pink.momostr"
],
[
"-"
]
],
"content": "#CSS has come so far but it still feels so lacking when it comes to overflow and sticky positioning.\n\nsure, you can implement something like the holy grail layout using CSS grid, but that's usually a bad idea, because you give up all the optimizations that the \"root scroller\" comes with by default (such as keyboard scrolling and pull-to-refresh). https://codepen.io/hi_mayank/pen/GRaZXPg\n\nso instead you're stuck with `position: sticky`, which means you also need to add `z-index`, `background` and `scroll-margin`.",
"sig": "33c6902d1f97f87fe26d2fddb621b9091bf594bef49ad871fdf6f042eafcb47280d9c44a3afecd51b9143a1e187f43e771ea89934d704e152022b9e1cb9c5cd9"
}