[0x457]

> Material Design v1

I think it was the worst one. At least from an interoperability perspective: sure, a giant floating "+" in a circle in notes app on a mobile device is alright CTA to add a new note, but on anything bigger than that (even an iPad screen) it's bad.

Apps and websites using it felt like "Work in Progress, we will style it later" except there was no later it was already styled and was just ugly.

[amluto]

> sure, a giant floating "+" in a circle in notes app on a mobile device is alright CTA to add a new note

No, it’s not, because it floats over the actual content, which means that the user can neither see nor interact with the content under it. Of course, no one carefully designs the rest of the UI to make sure that content doesn’t get stuck under the floating button.

[overfeed]

> No, it’s not, because it floats over the actual content, which means that the user can neither see nor interact with the content under it.

1. How narrow is your screen? The FAB is typically used over scrollable full-width list items.

2. Using a design system does not release the app author from their UX duties, like making sure the UI works as best as possible.

[amluto]

It’s remarkably common for some floating UI element to obscure the bottom portion of something scrollable. You can’t work around this by scrolling because, if the region in question is on the screen at all, it’s at the bottom.

Even Mobile Safari messes this up on occasion — sometimes the URL bar at the bottom obscures the bottom of a page, and, while one can temporarily reveal it by dragging up, the content rubber-bands right back down when the user lets go.

[miunau]

This is solved by using dvh (or svh) instead of 100% for height in the CSS.

[amluto]

A small amount of searching suggests that dvh and svh have semantics on Mobile Safari that are, at best, confusing.

But I think this misses the point. Mobile Safari has a heuristically auto-hiding “toolbar”, and the heuristic is far from perfect, and the toolbar overlays the content, and Safari tries to offer some features that maybe let webpages move their content out of the way when hidden. And the result works poorly sometimes.

Fundamentally, doing a good job of having a control sitting on the section of the screen that shows content and mitigating the risk that the control obscures the content is hard.

[Groxx]

As much as I generally like MDv1: I hate those floating buttons with a passion.

They can occasionally work. But the vast majority of the time they simply get in the way and can't be hidden, because you're in a content-edge-case that doesn't scroll far enough, or you simply reached the end and they didn't leave after-end padding to make room for it. And very few actions are so important that you want to display it over everything else, for the same reasons that everyone recommends against popups.

Just put it in the freaking toolbar. Top or bottom, I don't care.

[glhaynes]

They just feel like yet more KPI-demanded clutter.

[0x457]

I'm so used to some random bs floating on the screen bottom-right (useless chat assistant or something), so my brain is trained to ignore those elements.