On a production site I have a background-attachment: fixed
image applied to the body
, and I'm using a gradient fallback for browsers that don't support this style rule, and a solid background fallback if that same browser doesn't support gradients. The problem is, it doesn't work reliably.
I've tried detecting background-attachment: fixed
support using document.body.style
as well as @supports
, but it's not consistent and I get quite a few false positives on iOS and Android devices. I've read the other SO posts and they all seem to suggest workarounds that have huge negative aspects, but at the same time, I realize there's a tradeoff here.
I've also read quite often that you shouldn't be detecting user agents because they can be spoofed. If I was detecting the user agent and only applied the gradient fallback to mobile browsers, is there really a downside to someone spoofing their agent as a mobile browser? If that happens, they'd just be presented with a gradient background instead. Do I need to worry about someone attempting to spoof their mobile browser's user agent as a desktop browser agent, or am I missing something larger here? I can't say I really want to do this, because it partially kills me inside, but I figured I'd ask.
I just thought of the above last night, but I'm really just looking for someone who's applied some kind of similar fallback on a production level site that doesn't significantly downgrade the user experience.