itch.io Community » itch.io » Questions & Support

Game pages trigger my migraines

A topic by Marja376 created Jun 15, 2023 Views: 306 Replies: 7

Viewing posts 1 to 2

Itch has non-scrolling nav elements hovering in front of the page.

I have a visual motion sensitivity, and if I scroll or page down, the combination of scrolling and non-scrolling elements triggers my migraines.

For me, having non-scrolling elements floating in front of scrolling ones, or vice-versa, is the worst, non-scrolling sidebars tend to be pretty bad too, and non-scrolling headers are tolerable as long as they aren't animated.

I also have trouble reading these nav elements, either because of the backgrounds, or because of the page header behind them.

For example: https://cone.itch.io/hex-kit

I have tried blocking animation in general, disabling smooth scrolling, and reducing the browser's frame rate, as well as the following userContent.css:

/* Fix Itch */

@-moz-document domain('itch.io') {

#user_tools { position: absolute; }

}

None of this works, is there another fix that I'm missing?

I've already reported the bug here: https://github.com/itchio/itch.io/issues/1249

Like Reply

redonihunter1 year ago (1 edit)

That element behaves differently for different pixel widths (see at bottom of post). If you have big enough zoom it will scroll away with the page.

And that style will anchor it to the page. If it does not for you, your style addon does not work properly. Try the code with display to see, if you can disable the element, if not you know for sure, that your addon does not work.

You can also inspect the element to see what styles are active on this. If too big , the style at the bottom is active ~~and the fixed style gets crossed~~ out.

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

@-moz-document domain("itch.io") {
    #user_tools { display:none; }
}


@media (max-width: 1300px)
.user_tools {
    position: absolute;
}

Like Reply

Marja3761 year ago (1 edit)

I use userContent.css, so it'll work on Mozilla's sites too, and so that browser updates won't delete it. A lot of my other css works. But neither position:absolute nor display:none works on itch.io.

Like Reply

redonihunter1 year ago (1 edit)

I did not know this can be done. Good to know. Anyways. Firefox seems to ignore your file. It would do a display none, but the position attribute is not used from the file, but from the site css. Use important. That works. And use inspect button to look the element. You can see wich css is used.

(Edit. I read the discussion in github. I can not tell you why your firefox does not do it. I can only tell you, my firefox ignored it, till i wrote important. And again, use the inbuilt inspect button. It should look like the screenshot.)

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

Like Reply

Deleted post1 year ago

Deleted 1 year ago

Marja3761 year ago

I can get a global rule stating

* #user_tools { position:absolute !important ; }

to work on itch, but it may break other sites.

Like Reply

redonihunter1 year ago

Check your file in an editor with syntax highlighting. You have bugs in there and firefox does not tell you this.

The addons used to integrate user styles have syntax checking and can apply it on the fly, without restarting firefox. I used Stylus 1.5.33 on Chrome and that is available for firefox as well.

If a global setting works, the namespaces are screwed up somehow. You probably do not even see userContent.css in the inspecor, do you. Because ff does not know that it has to apply the file to the site.

Like Reply

Marja3761 year ago (1 edit)

So my previous post disappeared. My userChrome.css changed the fonts in the inspector; my userContent.css changed fonts and font colors on the page, but as long as that section was limited to itch.io, it did not change the behavior of the nav section.

Like Reply

redonihunter1 year ago

Well. As you can see, the position uses the attribute from game.css

At this point I would use standard bug search pattern.

Make backup of your userContent.css and try naked file with only the absolute important setting.

If this fails, try -p to start firefox with profile manager and make a fresh profile to try out. My best guess is, that you have some interfering addons or a } problem with your userContent.css. Syntax highlighting editors are good for that.

Like Reply

This topic has been auto-archived and can no longer be posted in because there haven't been any posts in a while.