Bug Tracker

Ticket #7641 (closed enhancement: wontfix)

Opened 4 years ago

Last modified 2 years ago

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:
Blocking: Blocked by:

Description (last modified by dmethvin) (diff)

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);
			        	$temp.remove();
					}

Change History

comment:1 Changed 4 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 4 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 4 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.

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

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.

Thoughts?

An example of the implementation in a separate function, not in the core as proposed:  http://jsfiddle.net/darcyclarke/JNRpK/21/

Last edited 4 years ago by darcyclarke (previous) (diff)

comment:4 Changed 4 years ago by SlexAxton

  • Keywords auto animate added
  • Priority changed from undecided to low
  • Status changed from new to closed
  • Component changed from unfiled to effects
  • Resolution set to patchwelcome

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 3 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 3 years ago by lrbabe

  • Status changed from closed to reopened
  • Resolution patchwelcome deleted
  • Milestone 1.5 deleted

patch and unit tests here:  https://github.com/jquery/jquery/pull/408

comment:7 Changed 3 years ago by lrbabe

  • Owner set to lrbabe
  • Status changed from reopened to assigned
  • Version changed from 1.4.4 to 1.6.1
  • Milestone set to 1.next

comment:8 Changed 3 years ago by lrbabe

  • Summary changed from Animating height / width to "auto" to Animating style to "auto" and "" (empty string) values

comment:9 Changed 3 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 3 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 basic support for "auto" and "" is better than no support at all.

Version 0, edited 3 years ago by anonymous (next)

comment:11 Changed 3 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 3 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 3 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 3 years ago by jaubourg

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

comment:15 Changed 3 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 3 years ago by jzaefferer

  • Description modified (diff)

-1

comment:17 Changed 3 years ago by timmywil

-1

comment:18 Changed 3 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 3 years ago by dmethvin

  • Keywords 1.8-discuss removed
  • Status changed from assigned to closed
  • Resolution set to wontfix
  • Description modified (diff)
  • Milestone changed from 1.next to None
Note: See TracTickets for help on using tickets.