Summary: | [Meta] Transitions and animations do not apply to CSS generated content | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Faruk Ates <farukates> | ||||||||||||
Component: | CSS | Assignee: | 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, 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
Faruk Ates
2009-01-09 10:42:50 PST
*** Bug 16021 has been marked as a duplicate of this bug. *** Created attachment 48057 [details]
Example of transition combined with :after
Additional comments within the HTML5 document
*** Bug 29992 has been marked as a duplicate of this bug. *** 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. *** Bug 60426 has been marked as a duplicate of this bug. *** Transitions on elements with a 'content' property was fixed in http://trac.webkit.org/changeset/88308 Generated content still doesn't transition. Created attachment 96374 [details]
Exploratory patch
This patch tries to fix some of the issue with generated content, but doesn't work right.
Created attachment 96375 [details]
Testcase
*** Bug 62542 has been marked as a duplicate of this bug. *** *** Bug 65058 has been marked as a duplicate of this bug. *** 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 Firefox 9 already supports this. (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! *** Bug 68128 has been marked as a duplicate of this bug. *** 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. 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 *** Bug 85253 has been marked as a duplicate of this bug. *** Lets make this bug a meta bug, because each pseudo element needs to be handled differently when animated. 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)] 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)] Created attachment 201054 [details]
Example of transitioning effects on a div inside a summary element.
Created attachment 201055 [details]
Example of pseudo elements attached to summary and details.
|