Grow your CSS skills. Land your dream job.

Dissapearing pictures (Firefox / Mac OSX)

  • # December 10, 2012 at 12:34 pm

    I’ve just launched a new site: pestrepeller.co.uk, but have found that under certain circumstances in Firefox 17 (on Mac OSX) hovering over the polaroid-style product thumbnails causes them to entirely disappear!

    I’m pretty sure that this is a CSS rendering bug with the transition/animation, so figure it may not be ‘fixable’, if it works fine in other browsers.

    If you get a moment and you’re running a Mac, take a look. Just move your mouse pointer fairly rapidly over the ‘polaroid’ style thumbnail images for a few seconds and you’ll see them just blink right out of the page and disappear. Crazy.

    # December 10, 2012 at 1:54 pm

    Hey! I just upgraded to Firefox 17.0.1 on Mac OS X 10.8.2 and the polaroid effect works great for me. No disappearing.

    OH WAIT.

    I just read the end of your post about rapidly mousing over them and I can indeed get them to disappear. Playing around in Firebug and selecting the anchor element gets them to re-appear. Certainly a bug. I tried turning off transforms and then you can’t get them to disappear.

    I think what you should do is make a reduced test case and report to https://bugzilla.mozilla.org/ =)

    # December 10, 2012 at 2:26 pm

    Ah OK, thanks. Hope it doesn’t get anyone into trouble :)

    I’ll set it up on CodePen. Hopefully, I can replicate the issue there.

    It ‘feels’ like a resource issue when the browser is running two or more transforms at once. Certainly, when you’re down to only one polaroid (within close proximity) the final one won’t disappear.

    # December 10, 2012 at 4:19 pm

    http://codepen.io/gavincox/pen/iIrcf

    Have narrowed it down to what I think is part of a clear fix solution for the UL.

    Not certain if this a bug or just dodgy CSS now …

    # December 11, 2012 at 3:49 pm

    they dissapear for me too (Firefox / win7.)

    look at a page i just launched [www.texmachine.be](http://www.texmachine.be/gallery.php)
    with a similar idea.
    only difference is they transform reversed (straight-to-tilted on hover instead).
    i cannot make my ones go away with the fast hovering in any browser on my system (chrome, opera, ie10, safari for win and FF).

    i did this for the hovering (here omitting vendor prefixes for readability):


    .gallery-wrap img {
    border: 3px solid white;
    border-bottom: 10px solid white;
    box-shadow: 3px 3px 3px black;
    margin: 10px;
    transition: all .20s ease-in-out;
    transform: scale(.8);
    }
    .gallery-wrap img:hover {
    box-shadow: 8px 8px 7px #222;
    transform: scale(1.4);
    transform: rotate(20deg);

    props to chris for having an ‘AnsweringForumQuestions’-Screencast, btw ;)

    # December 12, 2012 at 5:43 am

    Yes, It’s down to this CSS:

    OL:before,
    UL:before,
    DL:before,
    DD:before,
    OL:after,
    UL:after,
    DL:after,
    DD:after {
    content: “”;
    display: table;
    }

    … which I think may be an issue Firefox is particularly sensitive to. It doesnt’ appear to be critical, so I think I’ll just remove it from my styles and say no more about it. :)

    # December 12, 2012 at 7:29 am

    “…and say no more about it.”

    :D

    # December 13, 2012 at 6:30 am

    Oh wait, the bug is generated by the combination of multiple transforms and this code (I’m using LESS):

    /* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
    .clearfix {
    zoom:1;
    &:before, &:after {
    content:””;
    display:table;
    }
    &:after { clear:both; }
    }

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".