W3C home > Mailing lists > Public > www-style@w3.org > March 2012

Re: [css3-transitions] Transitions from display:none

From: Dan Beam <dbeam@google.com>
Date: Mon, 19 Mar 2012 18:39:05 -0700
Message-ID: <CANpe7K33BMX9nKKQoVikYKqNvo8OPN8kE-wPuOMaHMLxtiGR4A@mail.gmail.com>
To: Boris Zbarsky <bzbarsky@mit.edu>
Cc: James Robinson <jamesr@google.com>, "Tab Atkins Jr." <jackalmage@gmail.com>, Sylvain Galineau <sylvaing@microsoft.com>, "www-style@w3.org" <www-style@w3.org>
> But the larger point that the flushing mechanism is not identical is
> absolutely true.  I expect there are other differences as well.
>
> Need to think a bit about the proposal.

Sorry to revive an old thread, but has there been any progress /
further thought on this issue?

I've noticed various web authors have been using hacks like
setTimeout() and .scrollTop to force a style flush to avoid issues
around code like:

  someNode.hidden = false; // or something else that affects display
  someNode.classList.add('do-a-transition'); // this fails to transition

You can see this behavior still exhibited in both Gecko and WebKit:

  http://jsfiddle.net/C2JtJ/11/show/ (no transition)
  http://jsfiddle.net/C2JtJ/10/show/ (touches .scrollTop, transition works)
  http://jsfiddle.net/C2JtJ/9/show/ (uses setTimeout, transition works
in WebKit and sometimes in Gecko)

I understand that the CSS3 transitions spec reads:

  "Since this specification does not define what property changes are
considered simultaneous, authors should be aware that changing any of
the transition properties a small amount of time after making a change
that might transition can result in behavior that varies between
implementations, since the changes might be considered simultaneous in
some implementations but not others."

But display is not a transitioning (or even transition-able, AFAIK)
property in this case, so is this an implementation defect?

This has lead to the need for stuff like this in our code:

  http://code.google.com/codesearch#OAMlx_jo-ck/src/chrome/browser/resources/ntp4/tile_page.js&exact_package=chromium&type=cs&l=195-205
  http://code.google.com/codesearch#OAMlx_jo-ck/src/chrome/browser/resources/options2/browser_options.js&exact_package=chromium&&l=498-505
  http://code.google.com/codesearch#OAMlx_jo-ck/src/chrome/browser/resources/options2/options_page.js&exact_package=chromium&l=775-778
  http://code.google.com/codesearch#OAMlx_jo-ck/src/chrome/browser/resources/options2/options.js&exact_package=chromium&type=cs&l=223-225

I can only imagine that this will mystify many when CSS transitions
enter the mainstream further.

Dan Beam
dbeam@google.com
Received on Tuesday, 20 March 2012 08:12:42 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:48:52 GMT