Forums

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

  1. Lizardboy
    Member
    Posted 3 months 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 3 months 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 3 months 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 3 months ago #

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

  5. Caroline Moore
    Member
    Theme Author

    Posted 3 months 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 3 months ago #

    Brilliant! Works a treat, thanks Caroline!!

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.