Bug 23209

Summary: [Meta] Transitions and animations do not apply to CSS generated content
Product: WebKit Reporter: Faruk Ates <farukates@me.com>
Component: CSSAssignee: Nobody <webkit-unassigned@lists.webkit.org>
Status: NEW    
Severity: Normal CC: 7raivis@inbox.lv, chrome@trash-mail.com, dan@coedit.co.uk, dglazkov@chromium.org, dino@apple.com, domenic@domenicdenicola.com, ericbidelman@chromium.org, esprehn@chromium.org, gregory.bolkenstijn@gmail.com, igor.oliveira@webkit.org, jacob.farber.work@gmail.com, jeff@wolfire.com, joe@joelambert.co.uk, josh.faul@gmail.com, Justin@mecham.me, komoroske@chromium.org, mathias@qiwi.be, mwichary@google.com, nebuchadnezzar_2069@gmx.de, paulirish@chromium.org, rik@webkit.org, robin@reala.net, robin@robinwinslow.co.uk, seddon.ryan@gmail.com, shoppen@bananenhand.de, simon.fraser@apple.com, spamfaenger@gmx.de, stpo@free.fr, syoichi@outlook.com, thsourg@gmail.com, webkit-bug-importer@group.apple.com, webkit-bugzilla@alanhogan.com, webkit.review.bot@gmail.com, wiredearp@wunderbyte.com
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Macintosh   
OS: Mac OS X 10.5   
URL: http://farukat.es/bugs/webkit-generated-trans.html
Bug Depends on: 85253, 92591    
Bug Blocks:    
Attachments:
Description Flags
Example of transition combined with :after
none
Exploratory patch
webkit.review.bot: commit‑queue-
Testcase
none
Example of transitioning effects on a div inside a summary element.
none
Example of pseudo elements attached to summary and details. none

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.