845352 - animated transitions for CSS3 flexbox growth

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[ygutfreund]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/20100101 Firefox/19.0
Build ID: 20130215130331

Steps to reproduce:


In this codepen example: http://codepen.io/DrYSG/pen/ovctn I created three flexboxes. The effect I want is that when one hovers over the middle box, it grows in size (color change in the demo is just to help me know about the hover).

In FireFox v19 this almost works correctly. But it is strange what it picks of the start and end widths of the animation.

In Chrome v25, I am getting rapid unstable oscillation of states (flashing). Really not correct.

In IE10 I get the same transition as FireFox, but no smooth transition.



Actual results:

For growing the middle box, I see it starts at 100% expands to about 300% then shrinks to 200%.

When I no longer hover, it shrinks from 200% to about 50% (instantly) and then transitions to 100%.


Expected results:

I am puzzled why the quick growth/shrink followed by the linear transition afterwards.

But you are doing much better than Chrome (I filed a bug there).

Comment 1

[Liz Henry (:lizzard) (relman/hg->git project)]

Wouldn't you  need to use -flex-grow to do this?  

I'm not sure, especially given that your example doesn't work in three different browsers, that this is a bug in Firefox.

Have you tried other forums to ask for code help? That might be good to do before reporting it as a browser bug.

Comment 2

[ygutfreund]

1. Do you really think that normal behavior for an animated grow of a box should be first to expand, then contract? Sounds to me like some sort of bug, but I would not argue the semantics. Call my code the bug - I don't take things personally. But does it not expose something that has be addressed by the implementation of flexbox? Or maybe this goes back to the spec? 

2.  don't need -flex-grow I am using the shorthand flex: 2 0; where the first parameter is the grow.

Comment 3

[Liz Henry (:lizzard) (relman/hg->git project)]

Another possible avenue to try from reading MDN:

https://developer.mozilla.org/en-US/docs/CSS/flex

"Firefox supports only single-line flexbox. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true."

So it looks like that might help and also, that FF19 does have some specific issues. I wonder if you might look to see if your code works on the current Nightly build?

Comment 4

[ygutfreund]

I enabled flexbox support, that is why it works fine in all three browers without the animation.

Oh yes, I did submit this to stackoverflow. But it is such a curious thing. If I just do it without animation, I get a perfectly fine grow and shrink behavior in all three browsers. But the animated transition is what makes look bizzare (but being more of a graphic designer, and human factors person, I know that the non-abrupt transition is less distracting).

Comment 5

[Liz Henry (:lizzard) (relman/hg->git project)]

 Thanks very much ygutfreund! I will go ahead and take a look at how it behaves on nightly. If you could attach a screenshot that would also help.

Comment 6

[ygutfreund]

I also submitted this as a bug to the Chrome Folks, and  they were able to help me fix it. 

Now it works fine in Chrome, but FireFox is still not doing what the Chromium folks say it is supposed to do.

See: http://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20Modified&groupby=&sort=&id=178221

Comment 7

[Daniel Holbert [:dholbert]]

The snapping behavior here is correct per spec -- it's happening because you're changing the "flex-grow" from 0 to 2, and the spec says flex-grow *does not interpolate* between 0 and other values.

Spec quote, for reference:
> 7.3.1. The ‘flex-grow’ property
[snip]
> Animatable: 	yes, except between ‘0’ and other values
http://www.w3.org/TR/css3-flexbox/#flex-grow-property

So we snap that property immediately from 0 to 2 when you hover (with no interpolation), and from 2 back to 0 when you un-hover, while we transition the other properties smoothly.

So this bug is INVALID since we're doing what the spec calls for.

(However, note that Tab Atkins has a proposal to change this in the spec
 http://lists.w3.org/Archives/Public/www-style/2013Oct/0246.html
though it's currently just a proposal and hasn't made it into a spec yet.)