Bug 23209 - [Meta] Transitions and animations do not apply to CSS generated content
: [Meta] Transitions and animations do not apply to CSS generated content
Status: NEW
Product: WebKit
Classification: Unclassified
Component: CSS
: 528+ (Nightly build)
: Macintosh Mac OS X 10.5
: P2 Normal
Assigned To: Nobody
http://farukat.es/bugs/webkit-generat...
: InRadar
Depends on: 85253 92591
Blocks:
  Show dependency treegraph
 
Reported: 2009-01-09 10:42 PST by Faruk Ates
Modified: 2013-05-08 04:11 PDT (History)
34 users (show)

See Also:


Attachments
Example of transition combined with :after (1.63 KB, text/html)
2010-02-03 11:25 PST, Florian Sternke
no flags Details
Exploratory patch (16.29 KB, patch)
2011-06-07 21:48 PDT, Simon Fraser (smfr)
webkit.review.bot: commit‑queue-
Details | Formatted Diff | Diff
Testcase (731 bytes, text/html)
2011-06-07 21:49 PDT, Simon Fraser (smfr)
no flags Details
Example of transitioning effects on a div inside a summary element. (2.01 KB, text/html)
2013-05-08 04:10 PDT, Michael
no flags Details
Example of pseudo elements attached to summary and details. (925 bytes, text/html)
2013-05-08 04:11 PDT, Michael
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Faruk Ates 2009-01-09 10:42:50 PST
This is a Request For Enhancement.

Generated content pseudo-elements (:before and :after) are currently impervious to CSS Transitions. They do have CSS Transforms applied to them just fine, but Transitions just don't work. A :hover that triggers a change will simply immediately switch to the new state no matter what CSS Transitions are specified to the element.
Comment 1 Simon Fraser (smfr) 2009-04-23 22:59:30 PDT
*** Bug 16021 has been marked as a duplicate of this bug. ***
Comment 2 Florian Sternke 2010-02-03 11:25:02 PST
Created attachment 48057 [details]
Example of transition combined with :after

Additional comments within the HTML5 document
Comment 3 Simon Fraser (smfr) 2011-04-15 09:59:03 PDT
*** Bug 29992 has been marked as a duplicate of this bug. ***
Comment 4 Simon Fraser (smfr) 2011-04-15 10:01:04 PDT
See also bug 58669
Comment 5 Dan Nye 2011-04-27 07:30:39 PDT
From what I'm seeing, it looks like it's not just generated content pseudo-elements that apply the transitions immediately - any element that has generated content seems to cause the same behaviour.

For example, applying the uri of the Google logo as the content for a <div> causes that <div> to transition suddenly, where not having the content style set at all leaves it happily animating away.
Comment 6 Simon Fraser (smfr) 2011-06-06 20:51:13 PDT
*** Bug 60426 has been marked as a duplicate of this bug. ***
Comment 7 Simon Fraser (smfr) 2011-06-07 21:47:37 PDT
Transitions on elements with a 'content' property was fixed in http://trac.webkit.org/changeset/88308

Generated content still doesn't transition.
Comment 8 Simon Fraser (smfr) 2011-06-07 21:48:11 PDT
Created attachment 96374 [details]
Exploratory patch

This patch tries to fix some of the issue with generated content, but doesn't work right.
Comment 9 Simon Fraser (smfr) 2011-06-07 21:49:14 PDT
Created attachment 96375 [details]
Testcase
Comment 10 Simon Fraser (smfr) 2011-06-13 17:24:37 PDT
*** Bug 62542 has been marked as a duplicate of this bug. ***
Comment 11 Simon Fraser (smfr) 2011-07-23 21:40:51 PDT
*** Bug 65058 has been marked as a duplicate of this bug. ***
Comment 12 WebKit Review Bot 2011-07-24 09:52:43 PDT
Comment on attachment 96374 [details]
Exploratory patch

Attachment 96374 [details] did not pass chromium-ews (chromium-xvfb):
Output: http://queues.webkit.org/results/9228706

New failing tests:
fast/css/getComputedStyle/getComputedStyle-with-pseudo-element.html
Comment 13 Anthony Ricaud 2012-01-19 08:06:24 PST
Firefox 9 already supports this.
Comment 14 Christophe Andrieu 2012-01-19 08:36:04 PST
(In reply to comment #13)
> Firefox 9 already supports this.

I believe even Firefox 4 supports this.
Very useful trick, hope this will work in Webkit soon!
Comment 15 Shane Stephens 2012-02-13 19:11:38 PST
*** Bug 68128 has been marked as a duplicate of this bug. ***
Comment 16 Simon Fraser (smfr) 2012-02-23 16:22:01 PST
<rdar://problem/10922615>
Comment 17 Igor Trindade Oliveira 2012-03-02 09:55:34 PST
I am taking a look in the bug. The exploratory patch is not working because when updateAnimations is called, sometimes it calls setNeedsStyleRecalc() and when we have generated content it calls updateFirstLetter or updateBeforeAfter, so they call updateAnimations and we have an infinite loop.
I will be sending a patch soon.
Comment 18 Robin 2012-04-26 05:45:06 PDT
This is an open issue in Chromium bug-tracker, with (currently) 82 people watching it:
http://code.google.com/p/chromium/issues/detail?id=54699
Comment 19 Simon Fraser (smfr) 2012-05-01 11:01:04 PDT
*** Bug 85253 has been marked as a duplicate of this bug. ***
Comment 20 Igor Trindade Oliveira 2012-05-01 13:52:52 PDT
Lets make this bug a meta bug, because each pseudo element needs to be handled differently when animated.
Comment 21 Michael 2013-05-07 16:05:31 PDT
Transitions and pseudo-elements do not work with the summary element:

div summary div:hover:after <-- this works
div summary:hover div:after <-- this does not
div:hover summary div:after <-- neither does this

If the summary element or an ancestor is being the target for the :hover state, descendents of the summary element won't transition. The styles are applied, though. This happens for all elements, not only pseudo-elements.

Also, summary:after and summary:before do not show any content at all. Maybe (un)related?

[Chrome 27.0.1453.73 beta (Ubuntu 64 bit)]
Comment 22 Igor Trindade Oliveira 2013-05-07 16:13:24 PDT
Could you provide a reduced test case for each problem described by you?
(In reply to comment #21)
> Transitions and pseudo-elements do not work with the summary element:
> 
> div summary div:hover:after <-- this works
> div summary:hover div:after <-- this does not
> div:hover summary div:after <-- neither does this
> 
> If the summary element or an ancestor is being the target for the :hover state, descendents of the summary element won't transition. The styles are applied, though. This happens for all elements, not only pseudo-elements.
> 
> Also, summary:after and summary:before do not show any content at all. Maybe (un)related?
> 
> [Chrome 27.0.1453.73 beta (Ubuntu 64 bit)]
Comment 23 Michael 2013-05-08 04:10:12 PDT
Created attachment 201054 [details]
Example of transitioning effects on a div inside a summary element.
Comment 24 Michael 2013-05-08 04:11:28 PDT
Created attachment 201055 [details]
Example of pseudo elements attached to summary and details.