Response title
This is preview!
Move this topic
Animations and clearfix
in Developing jQuery Core
•
15 years ago
There is a CSS hack for clearing floated elements, but unfortunately,
animations that are applied to those elements with this applied to
don't animate properly in IE6.
For an example: http://www.texotela.co.uk/clearfixbug.php
I can work around it by wrapping another DIV around the one with the
clearfix class applied to it and animating that instead, but I wanted
to know if there was a way round it without requiring extra markup
(i.e. is it a bug in jQuery?)
Replies(11)
Re: Animations and clearfix
15 years ago
It seems like it's doing what you'd expect - I don't know exactly how
jQuery would be able to "intelligently" decide between when you're
providing a 1% hack vs. when something is actually 1% tall. This is
definitely a case where using a hack is probably not recommended.
--John
jQuery would be able to "intelligently" decide between when you're
providing a 1% hack vs. when something is actually 1% tall. This is
definitely a case where using a hack is probably not recommended.
--John
Leave a comment on jeresig's reply
Re: Animations and clearfix
15 years ago
<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Sam, have you tried changing height: 1% to zoom: 1 ?<DIV><BR class="khtml-block-placeholder"></DIV><DIV>It looks like it's just there to force hasLayout. I'd be interested to see what happens if you get rid of the height: 1% and do this instead: <DIV><BR class="khtml-block-placeholder"></DIV><DIV>* html .clearfix {<DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>zoom: 1;</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">}</DIV><DIV><BR class="khtml-block-placeholder"></DIV>Hope that helps.<BR><DIV> <SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR><DIV><DIV>On Aug 6, 2007, at 1:16 PM, John Resig wrote:</DIV><BR class="Apple-interchange-newline"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">It seems like it's doing what you'd expect - I don't know exactly how</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">jQuery would be able to "intelligently" decide between when you're</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">providing a 1% hack vs. when something is actually 1% tall. This is</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">definitely a case where using a hack is probably not recommended.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">--John</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">On 8/6/07, Sam Collett <<A href="mailto:sam.collett@gmail.com">sam.collett@gmail.com</A>> wrote:</DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">There is a CSS hack for clearing floated elements, but unfortunately,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">animations that are applied to those elements with this applied to</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">don't animate properly in IE6.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">For an example: <A href="http://www.texotela.co.uk/clearfixbug.php">http://www.texotela.co.uk/clearfixbug.php</A></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I can work around it by wrapping another DIV around the one with the</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">clearfix class applied to it and animating that instead, but I wanted</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">to know if there was a way round it without requiring extra markup</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">(i.e. is it a bug in jQuery?)</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> </BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> </BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> </BLOCKQUOTE></DIV><BR></DIV></DIV>
Leave a comment on kswedberg's reply
Leave a comment on klaus.hartl1's reply
Re: Animations and clearfix
15 years ago
I think I've fixed it now (and cut down on some css). It was probably
the height being set at 1% that was the cause. No idea if it works in
Mac IE, or Mac Safari though (anyone able to test?).
Leave a comment on sam.collett's reply
Leave a comment on j_birch's reply
Re: Animations and clearfix
15 years ago
I just tried it in Safari 3.0.3. In Firefox <a href="http://2.0.0.6">2.0.0.6</a> (mac), I get a flash of the full-width outer box which disappears almost immediately and then shows the animation. But in Safari 3, it's perfect.
<div><span class="gmail_quote">On 8/7/07, <b class="gmail_sendername">Joel Birch</b> <<a href="mailto:j_birch@tpg.com.au">j_birch@tpg.com.au</a>> wrote:</span><blockquote class="gmail_quote" style="margin:0;margin-left:0.8ex;border-left:1px #ccc solid;padding-left:1ex">
On 07/08/2007, at 8:51 PM, Sam Collett wrote:
> I think I've fixed it now (and cut down on some css). It was probably
> the height being set at 1% that was the cause. No idea if it works in
> Mac IE, or Mac Safari though (anyone able to test?).
Works perfect in Mac Safari 2.0.4. As for Mac IE... who cares? jQuery
itself doesn't work in Mac IE.
Joel Birch.
</div>
<br clear="all">
--
_____________________________________
Brad Brizendine
CTO, Glyphix <a href="http://www.glyphix.com/">http://www.glyphix.com/</a>
<div><span class="gmail_quote">On 8/7/07, <b class="gmail_sendername">Joel Birch</b> <<a href="mailto:j_birch@tpg.com.au">j_birch@tpg.com.au</a>> wrote:</span><blockquote class="gmail_quote" style="margin:0;margin-left:0.8ex;border-left:1px #ccc solid;padding-left:1ex">
On 07/08/2007, at 8:51 PM, Sam Collett wrote:
> I think I've fixed it now (and cut down on some css). It was probably
> the height being set at 1% that was the cause. No idea if it works in
> Mac IE, or Mac Safari though (anyone able to test?).
Works perfect in Mac Safari 2.0.4. As for Mac IE... who cares? jQuery
itself doesn't work in Mac IE.
Joel Birch.
</div>
<br clear="all">
--
_____________________________________
Brad Brizendine
CTO, Glyphix <a href="http://www.glyphix.com/">http://www.glyphix.com/</a>
Leave a comment on brizbane's reply
Re: Animations and clearfix
15 years ago
Not sure why you get that in Mac Firefox, but not Windows - which
shows that even with the same rendering engine, you can get
differences between platforms.
Leave a comment on sam.collett's reply
Re: Animations and clearfix
15 years ago
Oh no, that Mac Firefox flicker's not back is it? It seems to pop up
every few jQuery versions or so. I think maybe Brandon Aaron may have
an idea why this is happening - he seems to be the person who has
fixed it in the past.
Joel Birch.
Leave a comment on j_birch's reply
Re: Animations and clearfix
15 years ago
I haven't seen any examples of this coming back, save for this report.
I wouldn't worry about it too much.
That being said, I'm going to be changing how some height/width
calculations are done in jQuery.css so that should help things out.
--John
I wouldn't worry about it too much.
That being said, I'm going to be changing how some height/width
calculations are done in jQuery.css so that should help things out.
--John
Leave a comment on jeresig's reply
Re: Animations and clearfix
15 years ago
My site actually still uses jQuery 1.1.2 (due to some regressions in
1.1.3 - Safari crashing, no .click, Thickbox displaying in wrong place
in IE 6), but will probably move to 1.1.4 when it is out. Although I
probably should have tested it when it 1.1.3 was in beta testing.
Leave a comment on sam.collett's reply
Re: Animations and clearfix
15 years ago
As much as I hate it, I'm a fan of the <br class="clearfloat" /> ..
With a 1% height, I can put it anywhere, and it stays invisible and I
never need to animate it.
Leave a comment on cwp4000's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to sam.collett's discussion
{"z2949336":[14737000000449013],"z882340":[14737000000449003],"z1920328":[14737000000448991,14737000000448999,14737000000449005,14737000000449011],"z2566198":[14737000000448993,14737000000449009],"z2973163":[14737000000448997],"z464496":[14737000000448995],"z2941064":[14737000000449001,14737000000449007]}