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, malowmas24, mathias, mwichary, nebuchadnezzar_2069, paulirish, rik, robin, robin, seddon.ryan, shoppen, simon.fraser, spamfaenger, stpo, syoichi, thsourg, t.tom, webkit-bug-importer, webkit-bugzilla, webkit.review.bot, wiredearp
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Mac   
OS: 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

Faruk Ates
Reported 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.
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-
DetailsFormatted DiffDiff
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
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2009-04-23 22:59:30 PDT
*** Bug 16021 has been marked as a duplicate of this bug. ***
Florian Sternke
Comment 2 2010-02-03 11:25:02 PST
Created attachment 48057 [details] Example of transition combined with :after Additional comments within the HTML5 document
Simon Fraser (smfr)
Comment 3 2011-04-15 09:59:03 PDT
*** Bug 29992 has been marked as a duplicate of this bug. ***
Simon Fraser (smfr)
Comment 4 2011-04-15 10:01:04 PDT
See also bug 58669
Dan Nye
Comment 5 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.
Simon Fraser (smfr)
Comment 6 2011-06-06 20:51:13 PDT
*** Bug 60426 has been marked as a duplicate of this bug. ***
Simon Fraser (smfr)
Comment 7 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.
Simon Fraser (smfr)
Comment 8 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.
Simon Fraser (smfr)
Comment 9 2011-06-07 21:49:14 PDT
Created attachment 96375 [details] Testcase
Simon Fraser (smfr)
Comment 10 2011-06-13 17:24:37 PDT
*** Bug 62542 has been marked as a duplicate of this bug. ***
Simon Fraser (smfr)
Comment 11 2011-07-23 21:40:51 PDT
*** Bug 65058 has been marked as a duplicate of this bug. ***
WebKit Review Bot
Comment 12 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
Anthony Ricaud
Comment 13 2012-01-19 08:06:24 PST
Firefox 9 already supports this.
Christophe Andrieu
Comment 14 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!
Shane Stephens
Comment 15 2012-02-13 19:11:38 PST
*** Bug 68128 has been marked as a duplicate of this bug. ***
Simon Fraser (smfr)
Comment 16 2012-02-23 16:22:01 PST
<rdar://problem/10922615>
Igor Trindade Oliveira
Comment 17 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.
Robin
Comment 18 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
Simon Fraser (smfr)
Comment 19 2012-05-01 11:01:04 PDT
*** Bug 85253 has been marked as a duplicate of this bug. ***
Igor Trindade Oliveira
Comment 20 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.
Michael
Comment 21 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)]
Igor Trindade Oliveira
Comment 22 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)]
Michael
Comment 23 2013-05-08 04:10:12 PDT
Created attachment 201054 [details] Example of transitioning effects on a div inside a summary element.
Michael
Comment 24 2013-05-08 04:11:28 PDT
Created attachment 201055 [details] Example of pseudo elements attached to summary and details.
Leslie Faulkner
Comment 25 2024-10-31 20:38:46 PDT
CSS pseudo-elements :before and :after cannot use transitions, causing instant state changes on hover instead of smooth transitions. This is a known limitation, and workarounds include using additional HTML elements or JavaScript for better control http://code.google.com/p/chromium/issues/detail?id=54699 https://amongusonline.co
Note You need to log in before you can comment on or make changes to this bug.