Bug Tracker

Opened 6 years ago

Closed 5 years ago

Last modified 5 years ago

#7641 closed enhancement (wontfix)

Animating style to "auto" and "" (empty string) values

Reported by: darccyclarke Owned by: lrbabe
Priority: low Milestone: None
Component: effects Version: 1.6.1
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by dmethvin)

Have been doing some testing and realized trying to animate height / width to the "auto" value doesn't work. Submitting my quick patch that seems to solve this.

Note: there may be a better way then to clone the node to get it's default values but I thought it worked well in this case. This shoul be pretty heavily scrutinized since I've only bounced the idea off a few other people.

Add the following before line #6471 (Unminified jQuery 1.4.4 version):

if ( val === "auto" && ( name === "height" || name === "width" ) ){
						var $temp = jQuery(self).clone().css(name,"auto").appendTo("body");
						val = $temp.css(name);

Change History (19)

comment:1 Changed 6 years ago by ajpiano

I agree that animating width/height auto should probably work "out of the box," but I am not quite sure that this patch will do that job - or if any patch could do that job accurately.

comment:2 Changed 6 years ago by paul.irish

Ditto. In fact, CSS Transitions currently are pretty shit when going from 'auto' to a value or vice versa. This should work.. but its tricky to.

The patch here won't cut it.

But I'd like this feature fo sho

comment:3 Changed 6 years ago by darcyclarke

Ater talking with Paul a bit about this I've come up with a slightly different version of my proposed patch. Instead of appending the cloned element to the body I insert it before itself. And instead of removing the element completely Paul suggested detaching it.

if ( val === "auto" && ( name === "height" || name === "width" ) ){
     var $temp = jQuery(self).clone().css(name,"auto").insertBefore(self);
     val = $temp.css(prop);

I think this is a pretty solid solution. Again, it's open to criticism if someone can find the flaw in obtaining the intended CSS attributes value this way.


Version 0, edited 6 years ago by darcyclarke (next)

comment:4 Changed 6 years ago by SlexAxton

Component: unfiledeffects
Keywords: auto animate added
Priority: undecidedlow
Resolution: patchwelcome
Status: newclosed

This seems like a cool feature/enhancement, but it really seems like one of those that you'll need to take the reigns on and create a pull request along with several unit tests showing it works.

I'm a little worried about a flash of weird content, or an accidental rerunning of script elements (by injecting them again), or more commonly just performance hits.

I'd love to see it work though.

comment:5 Changed 6 years ago by adam@…

Using jQuery 1.5.2. Not only does animating the height/width of an element to "auto" not work, but it causes a JavaScript error in IE 7 and IE 8. I don't mind that it doesn't work (I'm really just passing it through as a dummy value), but it'd be nice if it didn't throw an error.

Could it work? It doesn't seem like it'd be too hard to figure out what the, e.g., height of an element would be if no styles were applied to it modifying its height, which is exactly what the "auto" property is. Am I wrong?

comment:6 Changed 6 years ago by lrbabe

Milestone: 1.5
Resolution: patchwelcome
Status: closedreopened

comment:7 Changed 6 years ago by lrbabe

Milestone: 1.next
Owner: set to lrbabe
Status: reopenedassigned

comment:8 Changed 6 years ago by lrbabe

Summary: Animating height / width to "auto"Animating style to "auto" and "" (empty string) values

comment:9 Changed 6 years ago by timmywil

From the pull: 'Correct me if I'm wrong, but won't this only work if there are uncomputed styles set that we can fall back to? For instance, the default value of width is "auto" and unless a width is set somewhere in the user css that isn't auto, we still can't do the animation.'

The main issue I see is that even the best browsers will return "auto" sometimes for _computed_ styles, so I'm not sure we can fully support animating auto.

comment:10 Changed 6 years ago by anonymous

(sorry, I just noticed your comment after answering on Github)

The problem of the "auto" value returned for computed style is also present in other part of the effects code, see how jQuery.fx.cur() deals with it. This didn't prevent us from writing the effect component ;-)

Having almost complete support for "auto" and "" is better than no support at all.

Last edited 6 years ago by lrbabe (previous) (diff)

comment:11 Changed 6 years ago by timmywil

Keywords: 1.8-discuss added; auto animate removed

Tabling for 1.8 discussion. Some of the team, including myself, still have concerns about adding support for these values.

comment:12 Changed 6 years ago by anonymous

The PR is now here: https://github.com/jquery/jquery/pull/515 additional info on why this patch is harmless has been included

comment:13 Changed 5 years ago by mikesherov

Description: modified (diff)

-1, This requires a bit more than the patch implies, no? Animating to auto width would mean the cloned element can't just be appended to the body as the patch implies. I could be persuaded if there was a simple enough way to do this.

comment:14 Changed 5 years ago by jaubourg

+0, If there is an easy, short way, then do it. Else, document it and move on.

comment:15 Changed 5 years ago by dmethvin

Description: modified (diff)

+0, If this doesn't take a lot of bytes I'm fer it, otherwise I'm agin' it. Animating things set to auto naturally raises a flag with me, sorry that some people expect it to work somehow.

comment:16 Changed 5 years ago by jzaefferer

Description: modified (diff)


comment:17 Changed 5 years ago by timmywil


comment:18 Changed 5 years ago by lrbabe

@mikesherov My current patch has nothing to do with the code posted when the bug was opened. It doesn't involve cloning elements anymore, see https://github.com/jquery/jquery/pull/515

@jaubourg The proposed patch adds exactly 58B to jquery minified and compressed

It saddens me to see some "-1" without any explanation. I wish I could understand and maybe answer your concerns.

comment:19 Changed 5 years ago by dmethvin

Description: modified (diff)
Keywords: 1.8-discuss removed
Milestone: 1.nextNone
Resolution: wontfix
Status: assignedclosed
Note: See TracTickets for help on using tickets.