Grayscale option has a bug

  • Unlike the other options such as “high contrast”, when you apply the Grayscale feature with the sidebar open, the sidebar does not follow you / remain stickied as you scroll down the page you’re on. Rather, it stays stuck to the “top” of the page, so to access the options again, you have to scroll back up. This seems like an obvious bug/glitch, as it’s not the case for the other options.

    I see that a year ago, another user – luisfco – mentioned this, and said:
    “In the grayscale there is no scroll and the first time I saw the plugin was at the bottom of the page when I applied the gray scale and everything disappeared, or that was my impression, since the configuration of the options was above all”

    His post: https://www.ads-software.com/support/topic/grayscale-no-scroll/

    His support request went unanswered. I am hoping one of the plugin authors here can weigh in on this issue. Seems like a relatively simple bug to fix.

    I look forward to your help, team!

Viewing 6 replies - 1 through 6 (of 6 total)

  • This is true for me as well. Additionally, the grayscale option prevents our main menu from sticking. Would love to see this resolved!

    +1 for this. We noticed this as well…

    Thread Starter craiggroshek

    (@craiggroshek)

    I’ve tried my best to get in touch with the plugin authors, but they appear to be M.I.A.

    Thread Starter craiggroshek

    (@craiggroshek)

    Sent some messages to them at https://www.Pojo.me and on their FB and Twitter pages. We’ll see if the developers get back. Looks like many of the social media accounts haven’t been updated in many months, or in some cases, years.

    Well you got me to do some digging of myself and I may have found a fix.
    The below css keeps it sticky in grayscale mode.
    Found answer is from here: https://github.com/pojome/one-click-accessibility/issues/24

    /* Override pojo style */
    body.pojo-a11y-grayscale {
    filter: none;
    -webkit-filter: none;
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
    filter: none;
    }
    /* Apply new filter to other elements */
    body.pojo-a11y-grayscale *{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray;
    }

    • This reply was modified 4 years, 7 months ago by generalcode.

    Okay, after some investigation into this, it turns out that filter cause some weird behaviors of descendants. I did see that there was a loophole so to speak… that if you move the filter from the body to the root (html) then it fixes the issue.

    So, we would need to do is add this to the CSS:

    body.pojo-a11y-grayscale {
    filter: unset !important;
    -webkit-filter: unset !important;
    -moz-filter: unset !important;
    -ms-filter: unset !important;
    -o-filter: unset !important;
}

    and then dynamically add this css if someone clicks the button. That is above my pay grade. Anyone know how to add this css dynamically? 

    html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray;
}
    • This reply was modified 4 years, 7 months ago by kbowson.
    • This reply was modified 4 years, 7 months ago by kbowson.
    • This reply was modified 4 years, 7 months ago by kbowson.
    • This reply was modified 4 years, 7 months ago by kbowson.
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Grayscale option has a bug’ is closed to new replies.