- This topic is empty.
-
AuthorPosts
-
December 10, 2012 at 12:34 pm #41256
D3mon
MemberI’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 #116759Chris Coyier
KeymasterHey! 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 #116768D3mon
MemberAh 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 #116776D3mon
Memberhttp://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 #116898twincy
Participantthey 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 #116963D3mon
MemberYes, 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 #116970twincy
Participant“…and say no more about it.”
:D
December 13, 2012 at 6:30 am #117215D3mon
MemberOh 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; }
} -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.