WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Remove grayscale in firefox (7 posts)

  1. Lizardboy
    Member
    Posted 1 year ago #

    First of all, really enjoying this theme - thanks!

    I've used this support forum to help me remove the grayscale effect from the circles (code pasted below). To remove it from firefox I have worked out that I need to remove the following line:
    filter: url(inc/desaturate.svg#greyscale); /* Firefox */

    However, this creates an effect in Firefox where the (now coloured) circles disappear after hovering the mouse over them.

    Is there a simple line I can replace the code for firefox above that allows the circles to be coloured without this problem?

    .blog .hentry a .attachment-post-thumbnail,
    .archive .hentry a .attachment-post-thumbnail,
    .search .hentry a .attachment-post-thumbnail {
    border-radius: 180px;
    filter: none;
    -webkit-filter: none;
    -webkit-filter: none; /* Older versions of webkit */
    -moz-filter: none;
    -o-filter: none;
    -ms-filter: none; /* IE 10 */
    filter: none; /* IE 9 */
    filter: url(inc/desaturate.svg#greyscale); /* Firefox */
    opacity: .8;
    -webkit-opacity: .8;
    -moz-opacity: .8;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
    z-index: 1;

  2. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    That's not happening when I remove/reset that property on the demo site.

    First, make sure you're using the most recent version of Firefox.

    You also have some duplicate properties in there -- filter: none, for example, is repeated, as is -webkit-filter: none. Try removing the duplicates and see if that helps.

    Otherwise I'm not sure what would cause it. If you can post a URL, that might provide more clues.

  3. Lizardboy
    Member
    Posted 1 year ago #

    Here's the url

    I've removed the duplicates and, so you can see what I mean, the following line:
    filter: url(inc/desaturate.svg#greyscale); /* Firefox */

    To see the issue, brush the pointer over some of the circles when using Firefox and see if they disappear.

    Firefox seems to be updated (v 18.0.2)

  4. Lizardboy
    Member
    Posted 1 year ago #

    I also just noticed that the offending effect stops happening when the page is refreshed.

  5. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    I'm able to reproduce this in Windows, but not on a Mac.

    Did some Google research and it appears this is a known Firefox bug when opacity, transition, and border-radius properties are applied to an image. Try adding this to your CSS:

    box-shadow: #000 0 0 0;

    I have no idea why it works, but it appears to fix the issue for me.

  6. Lizardboy
    Member
    Posted 1 year ago #

    Brilliant! Works a treat, thanks Caroline!!

  7. nicklaidman
    Member
    Posted 11 months ago #

    CAROLINE!!!! YOU ARE THE SHIZNET! I almost broke my head on the edge of my laptop! Thank YOU!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.