WordPress.org

Support

Support » Themes and Templates » Spun » [Resolved] Remove grayscale in firefox

[Resolved] Remove grayscale in firefox

  • 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;

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Caroline Moore

    @sixhours

    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.

    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)

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

    Theme Author Caroline Moore

    @sixhours

    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.

    Brilliant! Works a treat, thanks Caroline!!

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Remove grayscale in firefox’ is closed to new replies.
Skip to toolbar