Hi Matteo, Transitioning and animating abstract measurements (as opposed to specified pixel values) has been a gripe for some time. A classic bugbear is the time-honoured collapse / expand downward, which relies on transitioning from a height of 0 to 100%. Lea Verou found this neat trick of using max-height to achieve this — because the max-height itself is an abstract measurement, you can use hard pixel values:
http://dropshado.ws/post/32280391206/animating-max-height-to-overcome-height-auto-limitation I know this doesn't solve your specific situation, but it's worth bearing in mind that some kind of hack (involving a hidden duplicate with relative positioning above the real content div, then animating its max-height, maybe?) involving max-height might come in handy? Regards, Barney Carroll barney.carr...@gmail.com +44 7429 177278 barneycarroll.com On 28 August 2013 08:33, Kuzeko Web Design - Matteo Lissandrini < w...@kuzeko.com> wrote: > Unfortunately It's either CSS or CSS for me, so will do some fixed height > trick. > > > > ------------------ > > Kuzeko > > > > On 28 August 2013 04:58, Karl DeSaulniers <k...@designdrumm.com> wrote: > > > You don't. You use JavaScript or even better. jQuery. IMO. > > > > jQuery would handle what your wanting very nicely. I for one avoid > > animations with CSS. But that is just me I assume. > > > > Best, > > Karl > > > > Sent from losPhone > > > > On Aug 27, 2013, at 4:38 PM, Kuzeko Web Design - Matteo Lissandrini < > > w...@kuzeko.com> wrote: > > > > > Ok, thank you. > > > But then, the question becomes: how do I accomplish that effect with > only > > > CSS? > > > I.e., text of different length scrolling vertically from end to end > > without > > > hardcoding px or a predefined height?? > > > > > > Thanks > > > > > > > > > ------------------ > > > > > > Kuzeko > > > > > > > > > > > > On 27 August 2013 22:30, Eric <e...@minerbits.com> wrote: > > > > > >> ** > > >> It's more of a misbehavior than a bug. The Moz engineering team > probably > > >> just decided not to go back and change it after the spec was > finalized. > > >> It's sort of like how they're the only UA that doesn't support > display: > > >> run-in. Back int he '90s a bug was opened on it and loads of note by > > senior > > >> engineers stating why they should support (one saying that it's > > >> embarrassing for FF to be the only UA not to support) it's still > sitting > > >> there unassigned over 15yrs later. That's just how engineering teams > > work. > > >> > > >> I would suggest that you don't use percentage as a unit of measure in > > CSS > > >> animations. > > >> > > >> Eric > > >> > > >> > > >>> On August 27, 2013 at 8:09 AM Kuzeko Web Design - Matteo Lissandrini > < > > >> w...@kuzeko.com> wrote: > > >>> > > >>> > > >>> Thank you all for the answers, but now I am really confused. > > >>> So is this supposed to do so or is a bug? > > >>> > > >>> Can you fork my example and show me how to have this work properly if > > >> this > > >>> is possible? > > >>> > > >>> > > >>> > > >>> ------------------ > > >>> > > >>> Kuzeko > > >>> > > >>> > > >>> > > >>> On 27 August 2013 08:28, Philippe Wittenbergh <e...@l-c-n.com> > wrote: > > >>> > > >>>> > > >>>> Le 27 août 2013 à 14:52, "L. David Baron" <dba...@dbaron.org> a > écrit > > >> : > > >>>> > > >>>>> Many of the other references in the CSS spec to things that are > > >>>>> based on the height of the containing block explicitly say that if > > >>>>> the containing block's computed height is 'auto', then the > > >>>>> percentage is as well. See, for example: > > >>>>> http://www.w3.org/TR/CSS2/visudet.html#the-height-property > > >>>>> http://www.w3.org/TR/CSS2/visudet.html#min-max-heights > > >>>>> > > >>>>> http://www.w3.org/TR/CSS21/visuren.html#position-props , however, > > >>>>> does not say that, and you shouldn't infer it from the same thing > > >>>>> being stated elsewhere. > > >>>>> > > >>>>> The working group explicitly decided *not* to change this in 2009; > > >>>>> see: > > >>>>> http://wiki.csswg.org/spec/css2.1#issue-134 > > >>>>> http://lists.w3.org/Archives/Public/www-style/2009Jun/0056.html > > >>>>> http://lists.w3.org/Archives/Public/www-style/2009Aug/0092.html > > >>>> > > >>>> Oh :-(. I had forgotten about that resolution (which I find > > >> inconsistent > > >>>> with the way height and min-max-height work). Thing is, no browser > > >> released > > >>>> as of today, including Presto-Opera, implement this, even for a very > > >> basic > > >>>> test case [*] (I can't test IE 11beta, though). But Presto based > Opera > > >> and > > >>>> Gecko manage to animated it. Bizarre. > > >>>> > > >>>> [*] http://dev.l-c-n.com/_temp/top-perc.html > > >>>> > > >>>> Gecko bug report is here: > > >>>> https://bugzilla.mozilla.org/show_bug.cgi?id=260348 > > >>>> > > >>>> Philippe > > >>>> -- > > >>>> Philippe Wittenbergh > > >>>> http://l-c-n.com > > >>>> > > >>>> > > >>>> > > >>>> > > >>>> > ______________________________________________________________________ > > >>>> css-discuss [css-d@lists.css-discuss.org] > > >>>> http://www.css-discuss.org/mailman/listinfo/css-d > > >>>> List wiki/FAQ -- http://css-discuss.incutio.com/ > > >>>> List policies -- http://css-discuss.org/policies.html > > >>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > >>> > ______________________________________________________________________ > > >>> css-discuss [css-d@lists.css-discuss.org] > > >>> http://www.css-discuss.org/mailman/listinfo/css-d > > >>> List wiki/FAQ -- http://css-discuss.incutio.com/ > > >>> List policies -- http://css-discuss.org/policies.html > > >>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > ______________________________________________________________________ > > > css-discuss [css-d@lists.css-discuss.org] > > > http://www.css-discuss.org/mailman/listinfo/css-d > > > List wiki/FAQ -- http://css-discuss.incutio.com/ > > > List policies -- http://css-discuss.org/policies.html > > > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > ______________________________________________________________________ > > css-discuss [css-d@lists.css-discuss.org] > > http://www.css-discuss.org/mailman/listinfo/css-d > > List wiki/FAQ -- http://css-discuss.incutio.com/ > > List policies -- http://css-discuss.org/policies.html > > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
