[css-position-3] Please clarify how users can unstick position: sticky elements

[MarjaE2]

https://www.w3.org/TR/css-position-3/#sticky-position

position:sticky has become a staple of web design.

It can trigger migraines and motion sickness because, among other reasons,

1. Some sites animate headers as users scroll,
2. If users set our own fonts and font sizes, some sites can judder as users scroll past the threshold.
3. Some sites use position: sticky to keep sidebars in view while the rest of the page scrolls.

Animation, including judder, non-scrolling sidebars, seperately-scrolling columns, parallax, etc., etc. can all cause motion sickness and migraines.

The current article describes how web developers can write css to make certain elements sticky, but not how users can write css to make them un-sticky, whether to have them scroll with the rest of the page or, sometimes, for headers, to make them stay put without animation and judder.

[Loirooriol]

make them un-sticky

Set position: relative !important in user origin?

make them stay put without animation and judder

You can tell your browser that you prefer reduced motion, and hope that authors will use @media (prefers-reduced-motion) to check your preference. Or something like animation: none !important in user origin.

[jimmyfrasche]

I tried adding position: relative !important and it broke lots of stuff including stuff including things that were perfectly fine and unobjectionable but now screw up the page and make it unusable. Mostly I dislike the sticky site headers. It's distracting. Especially when they don't use vertical media queries and it ends up taking a quarter or more of the vertical space.

I use a bookmarklet to apply that now and reload and go into dev tools or just close the tab when a more targeted approach is necessary. Even when it works it doesn't always work as I've run into lots of scripts that overwrite my overwrite.

If there were a prefers-reduced- setting, I'd definitely toggle it and never look back. Presumably sites that break when you manually unset that would have a working layout that did not require fixed/sticky in the first place. That wouldn't fix sites that didn't use it or old sites that were made before, of course.

[MarjaE2]

prefers-reduced-motion doesn't affect this.

I think the judder is because, if users switch fonts and font sizes to make text readable, this breaks the carefully-chosen thresholds to switch from a scrolling element to a non-scrolling element.

I suppose the non-scrolling sidebars are because non-scrolling sidebars are now a standard web design element.

[Loirooriol]

It's hard to know what you are talking about without any testcase. I have never seen judder caused by sticky positioning. And as I said, you can override author rules it with important rules from user origin. I don't know what else you are asking for from a CSS point of view. If sticky positioning is so annoying for you, maybe ask your browser to add a preference to disable it, possibly as an accessibility feature?

[MarjaE2]

Here's a test case which judders, with either default font sizes or user-specified sizes. In this case, the header slides out of the way, and then reappears, although the page doesn't jump as it reappears.

https://github.com/w3c/csswg-drafts/issues/9510

Here's another which judders, with larger user-specified font sizes. In this case, the header doesn't slide out of the way, although the page jumps.

https://support.mozilla.org/en-US/products/firefox

If there are user-end rules that can stop this painful web design practice, the article should describe them. I've tried position: fixed !important and position: relative !important and they break things without fixing these.

[tabatkins]

I'm not sure what your first link is meant to refer to, since it's a link to this issue. Are you referring to GitHub's own sticky header?

If so, then neither of the cases you're pointing to are position: sticky. They're both done by JS instead. There's really nothing you can do to stop them from doing what they're doing, at least in a general fashion.

[MarjaE2]

Yes, I'm referring to Github's own sticky header.

[jimmyfrasche]

I have the following snippet for this site in stylus

.gh-header .gh-header-sticky.is-stuck + .gh-header-shadow,
.js-sticky {
  position: static !important;
}

It used to cause a lot of problems (that were still better than seeing the sticky header) but after the last redesign I haven't seen any issues, which is more exception than rule.

I would much prefer being able to state a preference for not seeing this instead of creating custom css for commonly used sites and running custom js/opening dev tools for random sites that have these.

It seems like preference queries have to start at the OS level and then get exposed to browsers? I'm not sure that would make much sense as it seems like a web specific thing.