Bug 23209 – [Meta] Transitions and animations do not apply to CSS generated content

• Status: NEW
• Component: CSS

[Faruk Ates]

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.

[Simon Fraser (smfr)]

*** Bug 16021 has been marked as a duplicate of this bug. ***

[Florian Sternke]

Created attachment 48057 [details]
Example of transition combined with :after

Additional comments within the HTML5 document

[Simon Fraser (smfr)]

*** Bug 29992 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

See also bug 58669

[Dan Nye]

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)]

*** Bug 60426 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

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)]

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)]

Created attachment 96375 [details]
Testcase

[Simon Fraser (smfr)]

*** Bug 62542 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

*** Bug 65058 has been marked as a duplicate of this bug. ***

[WebKit Review Bot]

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]

Firefox 9 already supports this.

[Christophe Andrieu]

(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]

*** Bug 68128 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

<rdar://problem/10922615>

[Igor Trindade Oliveira]

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]

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)]

*** Bug 85253 has been marked as a duplicate of this bug. ***

[Igor Trindade Oliveira]

Lets make this bug a meta bug, because each pseudo element needs to be handled differently when animated.

[Michael]

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]

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]

Created attachment 201054 [details]
Example of transitioning effects on a div inside a summary element.

[Michael]

Created attachment 201055 [details]
Example of pseudo elements attached to summary and details.

[Leslie Faulkner]

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