Dissapearing pictures (Firefox / Mac OSX)

[D3mon]

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.

[Chris Coyier]

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/ =)

[D3mon]

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.

[D3mon]

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 …

[twincy]

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

[D3mon]

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. :)

[twincy]

“…and say no more about it.”

:D

[D3mon]

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

[Author]

Posts