Styles to Block Sticky Elements?

Marja E

Hi,

I have visual processing issues, and when pages contain sticky elements, when trying to scroll, the edge issues can trigger my migraines. It's worse when there's animation as the sticky element loads, when there's too much contrast, or when the sticky element encroaches on the center of the screen. (I use near-maximized windows, so that scrolling everywhere doesn't trigger my migraines.)

I currently have a Firefox add-on which can remove sticky elements after they load, but can't keep them from loading.

Is there a user style which can replace relative positioning with absolute positioning? So sticky headers and footers go to the top or bottom of the page, instead of the window? And side elements are the worst, if they can't stay put, can they go away?

Marja Erwin

anagrammar

Not without breaking the internet. You can't just blindly negate position: fixed; globally, without causing way worse problems than you're trying to solve.

Marja E

With position: fixed many pages are unreadable and trigger migraines due to broken scrolling.

Worst-case scenario, after forcing position: absolute, some pages are unreadable and don't trigger migraines in that particular way.

anagrammar

Unfortunately, this isn't an "either/or" type of issue. It's impossible with pure CSS to negate fixed positioning intuitively globally, and messing with redefining the position: property with a wildcard or anything would result in "worst case scenarios" practically everywhere.

Marja E

And the worst-case scenario is still a massive improvement over the status quo.

anagrammar

That's rough. I've had a migraine or two. Like terrible hangover headaches that last forever.

The only way to do this with CSS is on a case by case basis. As you mentioned, it's very simple coding, most times only needing to simply change whichever element's position: to absolute or relative. That's the type of simple stuff you'd wanna start off with if you want to learn. I can't think of better motivation than the satisfaction of removing your migraine triggers from the web.

Marja E

Obviously, I can't program new code for every migraine trigger on every page, so I need global code for the most common of my migraine triggers.

Judging by here: https://www.w3schools.com/cssref/pr_class_position.asp

Relative shouldn't be a problem, but fixed and sticky are the problems.

Hard to see what I'm typing in the style editor-- somehow about:config doesn't work there and doesn't blocking the blinking accursed blinking cursor.

krystian3w

position: static !important?

Marja E

Ideally just for objects which would otherwise be sticky or fixed. I haven't figured out how to apply it to everything, yet, let alone any subset.

q1k

if the css is added in the style attribute in the html, ex. <div style="position: fixed">,
you can do the following
[style*="position: fixed"] { /* your css here*/ }
try it here

Marja E

Thanks!

Having some sucess with the following:

@namespace url(http://www.w3.org/1999/xhtml);

[style*="position: sticky"] { position: static ! important }

[style*="position: fixed"] { position: static ! important }

header { position: static ! important }

toaster { position: static ! important }

krystian3w

                                         :-c 

Marja E

Still a work in progress. I can't find a way to force u-fixed into position: static ! important and haven't been able to read the iotacss support site.

q1k

If you could grab the website's .css file you could probably add a small script that will change the position of all those elements.
I suppose you'll need a listener since some files are added dynamically.

Marja E

I don't know what's going on. I've tried using Firefox's inspector to try to find the css. It's often hard to find the right line.. and there's no reference to position: sticky or position: fixed or position: migraine-trigger, they just do these things.

q1k

what's the website?

Marja E

Almost every website these days.

Marja E

Pain is a common layout element.

That said, some are worse, and Twitter seems to be one of the worst. It has actual content down the middle, and a non-scrolling background on each side, close to the middle of the screen, with high contrast, and with patterns cut by the edge, so if I try to scroll, I'm hit with sheering pain from each side. Sometimes people point to discussions on Twitter, but I won't be able to read them until I can kill or block the backgrounds.

stonecrusher

@"Marja E"
See this bookmarklet:
https://www.ghacks.net/2018/08/16/remove-anything-that-is-sticky-on-websites/