Styles to Block Sticky Elements?
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
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
Comments
position: fixed;
globally, without causing way worse problems than you're trying to solve.Worst-case scenario, after forcing position: absolute, some pages are unreadable and don't trigger migraines in that particular way.
position:
property with a wildcard or anything would result in "worst case scenarios" practically everywhere.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:
toabsolute
orrelative
. 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.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.
position: static !important
?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
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 }
I suppose you'll need a listener since some files are added dynamically.
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.
See this bookmarklet:
https://www.ghacks.net/2018/08/16/remove-anything-that-is-sticky-on-websites/