be678 No.2124
always hated how floating buttons end up stuck behind the home indicator on ios. saw some stuff about using safe-area-inset to fix that mess. it's not like actual margins though so you can't just slap it on a div and call it a day. you basically have to pad the body or whatever if you don't want content getting clipped by the dynamic island. polypane seems to be the go-to for testing this properly since emulating the actual hardware is such a pain. i saw a snippet using env with a fallback value like 1rem just in case things break. it's pretty standard stuff but still annoying that we can't just ignore these cutouts anymore. feels like every new phone makes our css more complicated for no reason. anyone actually using the max-inset variables for anything besides extreme edge cases?
more here:
https://polypane.app/blog/using-safe-area-inset-to-build-mobile-safe-layouts/