Scrolling is broken on each game's page

[MarjaE2]

For example, if I visit here:

https://notwriting.itch.io/one-trillion-years

If I try to scroll the main body, it doesn't scroll the whole page, and my brain migraines. It's an increasingly common web design practice, and it's consistently painful. It's bad enough with the original colors, but it's worse if users set other colors for readability.

previously reported here by mistake https://github.com/itchio/itch/issues/2730

[leafo]

I'm not exactly sure what you're reporting about the page, as the page is using standard browser scrolling and scrollbars, and does not include a fixed background. Perhaps you can ensure that any browser extensions you're using aren't interfering?

[MarjaE2]

the page is using standard browser scrolling

Which triggers migraines.

I'm switching fonts and colors so I can read text. I also usually use an ad-blocker for safety, but even with all extensions disabled, I encounter the same non-scrolling section alongside the scrolling one, without adequate visual separation.

https://user-images.githubusercontent.com/12875862/141700755-c88dc9f6-a958-4b0d-9f18-981a3103a260.mov

[leafo]

Thanks for sharing the video recording. I can confirm that scrolling is not "broken" as you've suggested in your ticket, but the page has been intentionally designed that way to allow easy access to those tools and information. I'm sorry this type of webdesign causes you issues.

I haven't seen any other reports of people having similar issues with this part of the page, if we get more requests about it we can look into adding an accessibility option to disable it. In the meantime, though, since it appears that the issue is exacerbated on your end due to how you've configured your browser, I recommend a user provided stylesheet. Here's a CSS snippet that will prevent that part of the page from being fixed:

#user_tools { position: absolute; }

Hope that helps

[ryliejamesthomas]

If you add a float:right; to that it won't sit above the header.

[MarjaE2]

The css isn't working for me.

[MarjaE2]

It never has, I mostly avoid itch because of the migraines.

[leafo]

We haven't changed the layout in any substantial way since I last posted, I just confirmed the CSS I originally shared will prevent the buttons from scrolling with the view port.

Perhaps you can try adding !important to the end of the property in case there is something else interfering with the precedence.

#user_tools { position: absolute !important; }

[MarjaE2]

Here's the current non-working code:

/ Fix Itch / @-moz-document domain("itch.io") {

user_tools { position: absolute !important; }

}

I've tried endless variations and none of them work.

[ryliejamesthomas]

Perhaps itch could take advantage of prefers-reduced-motion to easily allow people to disable this behaviour.

---

Using the same CSS you used is working for me.

@-moz-document domain("itch.io") {
    #user_tools {
        position:absolute !important;
    }
}

Only things I can think of are:

• Firefox has disabled loading userContent.css (check about:config toolkit.legacyUserProfileCustomizations.stylesheets is true)
• Have you closed and reopened the browser? It doesn't reload the file unless you restart the browser.
• Do you have multiple Firefox profiles and it's loading a different one?

One workaround I found is that if you either view in a narrower window, or zoom in a bit, the links will be locked to the top. My horizontal resolution is 1920, and if I zoom in 150% the behaviour stops.

[MarjaE2]

I can get a global rule to work, but can't get the @-moz-document one to work.

Unfortunately, reducing the screen resolution breaks other apps, and reducing the window width below about 1280 pixels means I've got very wide non-scrolling sections on one or both sides of the screen, again triggering my migraines...

[ryliejamesthomas]

Does zooming-in help? That's how I originally found the workaround (Ctrl++ or Ctrl+mousewheel up). The zoom level gets saved per website, so you wouldn't have to redo it each time you visit itch.

[MarjaE2]

Yes, zooming helps, thanks.

In addition, making the css global instead of domain-specific works.