Bug 23209

Summary: [Meta] Transitions and animations do not apply to CSS generated content
Product: WebKit Reporter: Faruk Ates <farukates>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: 7raivis, chrome, dan, dglazkov, dino, domenic, ericbidelman, esprehn, gregory.bolkenstijn, igor.oliveira, jacob.farber.work, jeff, joe, josh.faul, Justin, komoroske, mathias, mwichary, nebuchadnezzar_2069, paulirish, rik, robin, robin, seddon.ryan, shoppen, simon.fraser, spamfaenger, stpo, syoichi, thsourg, webkit-bug-importer, webkit-bugzilla, webkit.review.bot, wiredearp
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 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.