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
: WebKit
CSS
: 528+ (Nightly build)
: Macintosh Mac OS X 10.5
: P2 Normal
Assigned To:
: http://farukat.es/bugs/webkit-generat...
: InRadar
: 85253 92591
:
  Show dependency treegraph
 
Reported: 2009-01-09 10:42 PST by
Modified: 2013-05-08 04:11 PST (History)


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 PST, Simon Fraser (smfr)
webkit.review.bot: commit‑queue-
Review Patch | Details | Formatted Diff | Diff
Testcase (731 bytes, text/html)
2011-06-07 21:49 PST, 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 PST, Michael
no flags Details
Example of pseudo elements attached to summary and details. (925 bytes, text/html)
2013-05-08 04:11 PST, Michael
no flags Details


Note

You need to log in before you can comment on or make changes to this bug.


Description From 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 From 2009-04-23 22:59:30 PST -------
*** Bug 16021 has been marked as a duplicate of this bug. ***
------- Comment #2 From 2010-02-03 11:25:02 PST -------
Created an attachment (id=48057) [details]
Example of transition combined with :after

Additional comments within the HTML5 document
------- Comment #3 From 2011-04-15 09:59:03 PST -------
*** Bug 29992 has been marked as a duplicate of this bug. ***
------- Comment #4 From 2011-04-15 10:01:04 PST -------
See also bug 58669
------- Comment #5 From 2011-04-27 07:30:39 PST -------
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 From 2011-06-06 20:51:13 PST -------
*** Bug 60426 has been marked as a duplicate of this bug. ***
------- Comment #7 From 2011-06-07 21:47:37 PST -------
Transitions on elements with a 'content' property was fixed in http://trac.webkit.org/changeset/88308

Generated content still doesn't transition.
------- Comment #8 From 2011-06-07 21:48:11 PST -------
Created an attachment (id=96374) [details]
Exploratory patch

This patch tries to fix some of the issue with generated content, but doesn't work right.
------- Comment #9 From 2011-06-07 21:49:14 PST -------
Created an attachment (id=96375) [details]
Testcase
------- Comment #10 From 2011-06-13 17:24:37 PST -------
*** Bug 62542 has been marked as a duplicate of this bug. ***
------- Comment #11 From 2011-07-23 21:40:51 PST -------
*** Bug 65058 has been marked as a duplicate of this bug. ***
------- Comment #12 From 2011-07-24 09:52:43 PST -------
(From update of attachment 96374 [details])
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 From 2012-01-19 08:06:24 PST -------
Firefox 9 already supports this.
------- Comment #14 From 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 From 2012-02-13 19:11:38 PST -------
*** Bug 68128 has been marked as a duplicate of this bug. ***
------- Comment #16 From 2012-02-23 16:22:01 PST -------
<rdar://problem/10922615>
------- Comment #17 From 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 From 2012-04-26 05:45:06 PST -------
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 From 2012-05-01 11:01:04 PST -------
*** Bug 85253 has been marked as a duplicate of this bug. ***
------- Comment #20 From 2012-05-01 13:52:52 PST -------
Lets make this bug a meta bug, because each pseudo element needs to be handled differently when animated.
------- Comment #21 From 2013-05-07 16:05:31 PST -------
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 From 2013-05-07 16:13:24 PST -------
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 From 2013-05-08 04:10:12 PST -------
Created an attachment (id=201054) [details]
Example of transitioning effects on a div inside a summary element.
------- Comment #24 From 2013-05-08 04:11:28 PST -------
Created an attachment (id=201055) [details]
Example of pseudo elements attached to summary and details.