Hacker News Reader

Comment by jsheard | Hacker News Reader

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/pref...

It just needs one extra CSS rule to make the guy invisible when appropriate:

  @media (prefers-reduced-motion) {
    #scrollBuddy {
      visibility: hidden;
    }
  }

View on HN

It 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/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.

Every change really does break someone's workflow https://xkcd.com/1172/

Counter-argument against exempting the demo page: https://news.ycombinator.com/item?id=43237672

At 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.

I 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.

"Dead dove, do not eat" - https://www.youtube.com/watch?v=YUKmq7UMJys

> Counter-argument against exempting the demo page

I really don't think that's a counter-argument for exempting the demo. It's an argument against ever implementing this feature on an actual website. Or, an argument for using the prefers-reduced-motion check on an actual website.

I like that cartoon. much care and thought should be taken when implementing changes that affect users :)

I really wish there was a separate category for "short and funny" xkcds.

Some of them are incredibly hilarious, but the author is just way too productive.

Thank you! I just went and adjusted a bunch of these, "reduced transparency" really reduced the visual load, I didn't realize how many windows were bleeding through for no reason.

> For me, this setting makes macOS snappier

For me, it just replaces the slow movement animations with slow fade animations instead, which is just utterly infuriating.

If you're like me and want to keep the OS setting intact but not have it affect web sites, add the following preference in Firefox: ui.prefersReducedMotion (0 = no, 1 = yes).

good to know thanks

I 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.

I 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!

I 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.

Time 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

good catch. it should be fixed now for users that have those settings turned on. much appreciated!

Now 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/ (panopticlick). Also see prefers-contrast, prefers-reduced-transparency, prefers-color-scheme, inverted-colors

I hope you see this comment:

Please revert the "fix" that makes it so your demo is not seen at all.

Would 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.

Oh that is a really good point!

that's a good point about prefers-reduced-motion... i hadn't considered that. it's an easy win for accessibility.

Reply on news.ycombinator.com