- This topic is empty.
-
AuthorPosts
-
December 10, 2012 at 12:34 pm #41256D3monMember
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 #116759Chris CoyierKeymasterHey! 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 #116768D3monMemberAh 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 #116776D3monMemberhttp://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 #116898twincyParticipantthey 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 #116963D3monMemberYes, 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 #116970twincyParticipant“…and say no more about it.”
:D
December 13, 2012 at 6:30 am #117215D3monMemberOh 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.