3 ms·
This kind of thing should probably be disabled if the user has prefers-reduced-motion set. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-redu
by jsheard 2y ago
This kind of thing should probably be disabled if the user has prefers-reduced-motion set.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
It just needs one extra CSS rule to make the guy invisible when appropriate:
@media (prefers-reduced-motion) {
#scrollBuddy {
visibility: hidden;
}
}
- deleted 2y ago[deleted]
- DrammBA 2y agoI just replied to call out how negative your initial comment was and was suprised to see the full edit, thank you for the change and even providing sample code.
- _blk 2y ago[flagged]
- DrammBA 2y agoNot sure what you mean by "not something you dictate to the server", browser preferences are client-side. When you say "all of those settings" there's really two major prefers- settings and you already covered one (prefers-color-scheme), writting an extra query to cover prefers-reduced-motion requires minimal effort and provides a lot of value to your site's accessibility.
- block_dagger 2y agoThis is CSS, it's not dictating anything to the server, rather to the browser.
- hello12343214 2y agogood catch. it should be fixed now for users that have those settings turned on. much appreciated!
- robocat 2y agoNow some of us would like an override checkbox to enable your demo again! I didn't even know I had prefers-reduced-motion turned on and I certainly didn't know it affected web pages via CSS!!! Another 0/1 bit for fingerprinting. Doesn't appear in https://coveryourtracks.eff.org/ https://coveryourtracks.eff.org/ (panopticlick). Also see prefers-contrast, prefers-reduced-transparency, prefers-color-scheme, inverted-colors
- mrjbq7 2y agoI hope you see this comment: Please revert the "fix" that makes it so your demo is not seen at all.
- Summerbud 2y agoOh that is a really good point!
- geor9e 2y agoIt seems the author has now implemented this. Now people like me just see a pointless page of lorem ipsum. I feel like demos can be exempted from filters like this, especially when you can only get to the demo via a clearly worded link. The same code that disappeared the thing could add some text explaining that the page is disabled and why, in my case: Apple Menu > System Preferences > Accessibility > Display > Reduce motion (for other OS's see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...) For me, this setting makes macOS snappier, by getting rid of the little animations in OS. If it weren't for this comment, I never would have known it affected websites. I've had the setting for years with no issues.
- DrammBA 2y agoEvery change really does break someone's workflow https://xkcd.com/1172/ https://xkcd.com/1172/ Counter-argument against exempting the demo page: https://news.ycombinator.com/item?id=43237672 https://news.ycombinator.com/item?id=43237672
- geor9e 2y agoAt a certain point, one must take responsibility for clicking "a scroll bar buddy that walks down the page when you scroll" and then being faced with exactly what it said.
- DrammBA 2y agoI agree that preferring reduced motion and then visiting a site whose sole purpose is presenting motion is an interesting choice, but I don't think the CSS Working Group or web developers in general are in any position to question it.
- Mashimo 2y ago"Dead dove, do not eat" - https://www.youtube.com/watch?v=YUKmq7UMJys https://www.youtube.com/watch?v=YUKmq7UMJys
- 2y ago
- codelion 2y agothat's a good point about prefers-reduced-motion... i hadn't considered that. it's an easy win for accessibility.
- oneeyedpigeon 2y agoI guess this is probably the kind of exact reason that I have "reduce motion" set, but it's a shame in this case since it's a pretty harmless implementation!
- yuters 2y agoI wish the author of the site didn't see your comment. It took me a while to understand why I couldn't see it on any browser.
- nashashmi 2y agoTime for the author to add a CSS VISIBILITY note for those with this preference alerting them to a non working page because their browser has this selected option
- deleted 2y ago[deleted]
- watusername 2y agoWould be neat if the author added some text to the demo page when prefers-reduced-motion is in effect, similar to <noscript> tags alerting you to the fact that JavaScript is disabled.