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.
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.
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.
look at a page i just launched www.texmachine.be
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):
... 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. :)
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.
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/ =)
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.
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 ...
they dissapear for me too (Firefox / win7.)
look at a page i just launched www.texmachine.be 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 ;)
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. :)
"...and say no more about it."
:D
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; } }