apple.com has a black semi-transparent sticky nav bar that, when content scrolls beneath it, boosts the content’s saturation by 80%. I didn’t notice this saturation boost until I inspected the source, to me it just looks “right” - removing the saturation boost makes it look desaturated. Why is that?
I didn’t see what you’re referring to until I looked at Apple’s site on my iPhone. Yesterday, on my Android tablet and today on my Mac in Chrome, the translucent effect seemed to be nothing more than the result of the CSS opacity property. On my iPhone, the image behind the bar blurs and seems to gradually override the dark gray bar. It’s also apparent in my desktop’s Safari browser — even up into the address bar.
I haven’t dug into the code, but is this some Apple-specific thing that isn’t part of the W3C specs?
I might not understand what you’re asking, but combining a percentage of the black bar with 100% of the underlying object would, of course, result in a decrease in saturation. Add black to any color, and the saturation (chroma) decreases.