How to Block Migraine-Inducing Mouseover Misfeatures

Hi,

I have coordination and sensory processing issues. So if a site has images which zoom on mouseover, it's hard to avoid accidentally mousing over the images, and easy to get migraines from getting hit by their zooming. I have similar issues with flashing and tooltips.

At least some of the time, zooming seems to come from the rule:

"transition: transform 500ms ease-out 0s,opacity 500ms ease-out 0s;"

I'm not sure how to write a style to disable this rule. Any ideas?

Comments

  • transition does exactly what it sounds like, smooth transitions, which isn't the problem. There's at least a couple different ways to create a zoom effect, but the most common is transform: scale.

    The best way to cancel out these effects is:

    {transform:none!important;}

    It'd be better to do it on a case to case basis, by finding the element with the
    transform code and making a style for that site to negate it, like:

    .particular-div{transform:none!important;}

    If you don't really know how to do that, you could try a more global approach. Make a global style with a wildcard:

    *{transform:none!important;}

    Even with the wildcard, you'll be better off not leaving it as completely global. Add domains that you want it to work for as you go along. transform is most often used in non-essential, eye-candy effects, but negating it globally will definitely break some essential functionality on rare occasions.
  • So what are the alternatives?

    Blocking it does break many sites, but not blocking it breaks my brain, and individually adding each migraine trigger on each site isn't an option. A one-click option to list individual sites might work; I have a Firefox add-on that does that with Javascript.
  • I also need some way to block elements that jump on mouseover. Blocking all transformations doesn't block these pains/animations. *pain*
  • It's always kinda amusing when you attempt to help someone, and they can't even be bothered to respond. Even better when they show back up months later complaining that the advice you gave them isn't working well enough.

    Bottom line is, the "magic bullet" solution you're looking for doesn't exist. Modern CSS is designed to be flashy with mouseover effects. The zoom you referred to originally is usually a transformation, but other effects are done with animations or more simply via regular sizing/margin changes with transitions. It'd be impossible to account for all of them globally, and with each method you negate, you'd break more unintended functionality.

    Nearly everyone has an extension that can disable javascript for sites with a couple clicks, or you can do so through browser settings fairly simply. This will also break unintended functionality pretty often. It'd be unwise to block javascript globally, and more often than not, even blocking javascript entirely for individual sites will break things. It might be okay occasionally, but you're much better off digging around and blocking scripts individually. This is also true for all the CSS effects you dislike. You'd be much better off changing CSS for individual elements, as I mentioned originally.

    If you stick with a wildcard approach, there is no "two click" solution. In Chrome, you have to copy/paste the domain in an "applies to" rule. In Firefox, you have to add an entry in the @-moz-doc rule.

    Changing the CSS to:

    * { transform: none!important; animation: none!important; }

    may help a little, but it'll also increase the odds of breaking functionality. Some "effects" are done with common properties that are impossible to negate unless it's done for individual elements.
  • My brother coded a style to block more mouseover pain/animation. I have to turn this on before visiting certain sites and off before visiting others.

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

    * {
    /*CSS transitions*/
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
    /*CSS transforms*/
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    /*CSS animations*/
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    }

    I am trying to edit it to block mouseover pain/animation from certain sites, without affecting other mouseover behavior on other sites.

    This is supposed to be a guide:

    https://github.com/stylish-userstyles/stylish/wiki/Applying-styles-to-specific-sites

    However

    @-moz-document domain("https://www.humblebundle.com/")

    and domain("www.humblebundle.com/")

    aren't working on their book lists.

    The global version does work, and the site-specific version does not.

    I am using Firefox. I know this wouldn't work in Chrome.
  • Modern browsers don't require that long list of browser prefixes to work, or to override. To get rid of transitions as well, you're probably better off using the shorthand property. All that is required to accomplish the same objective is:

    * { transform: none!important; animation: none!important; transition: none!important; }

    As for your other issue:

    @-moz-document domain("humblebundle.com")

    The whole thing:
    @-moz-document domain("humblebundle.com") {

    * { transform: none!important; animation: none!important; transition: none!important; }

    }
    Btw it'd work fine in Chrome, it's just a different setup. You can import the above format though, which would give you an idea what it looks like. "Write a new style"/Mozilla Format "import"/"overwrite"/name & save.
  • Thanks. That works, but I don't know why that version works when my old version didn't.
  • Don't work:

    domain("https://www.humblebundle.com/")

    domain("www.humblebundle.com/")

    The second one likely would've worked without the / at the end, although including www. can occasionally be detrimental because it's more specific, and can miss certain subdomains.

    Works:

    domain("humblebundle.com")
Sign In or Register to comment.