New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 251 users

Issue metadata

Status: Fixed
Owner:
Closed: Jan 2013
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug
CSS



Sign in to add a comment

CSS3 transition not applied for :before and :after pseudo elements

Reported by laukst...@gmail.com, Sep 7 2010 Back to list

Issue description

ChromeFrame version: Google Chrome 6.0.472.53 (Official Build 57914), WebKit 534.3, V8 2.2.24.19

CSS3 transition not applied for pseudo elements.

.transition:after,.transition:before{
    opacity:0;
    transition-property:opacity;
    transition-duration:2s;
    transition-delay:1s;
    -webkit-transition-property:opacity;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:1s;
    -moz-transition-property:opacity;
    -moz-transition-duration:2s;
    -moz-transition-delay:1s;
    -o-transition-property:opacity;
    -o-transition-duration:2s;
    -o-transition-delay:1s;
}
.transition:hover:after,.transition:focus:after,.transition:hover:before,.transition:focus:before{
    opacity:0.8;
}
 

Comment 1 by amit@chromium.org, Sep 7 2010

Labels: -Area-ChromeFrame Area-WebKit
probably webkit related...

Comment 2 by karen@chromium.org, Sep 9 2010

Labels: CSS Mstone-8
Labels: -Mstone-8 Mstone-9
Since we are passed the branch, moving all mstone-8 issues to mstone-9 for triage/punting

Comment 5 by karen@chromium.org, Nov 1 2010

Labels: -Mstone-9 Mstone-X

Comment 6 by Deleted ...@, Mar 9 2011

It half works in FF4. No go in Chrome.

Comment 7 by kareng@google.com, May 13 2011

Status: Available

Comment 8 by alcor@google.com, Jun 21 2011

Cc: dglazkov@chromium.org
Labels: -Mstone-X Mstone-15 Special-Apollo

Comment 9 by alcor@google.com, Jun 21 2011

Labels: -Mstone-15 Mstone-14

Comment 10 by k...@google.com, Jul 28 2011

Labels: -Mstone-14 Mstone-15 MovedFrom-14
Punting out non-critical bugs.  Please move back to 14 if you believe this was done in error.
It works fine on FF4+ http://jsfiddle.net/4rnsx/88/
CSS pseudo element transition and animation status in article http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/

Comment 12 by kareng@google.com, Sep 8 2011

Labels: Mstone-16 bulkmove MovedFrom15
moving all non-essential bugs from 15 to 16. please feel free to move back if this was an error and your bug is a release blocker.
Maybe that should move to a new bug, but i post it here since its related:
CSS Animations also do not work on Pseudo-Elements: http://jsfiddle.net/Avorin/dmqsR/show

Comment 14 by laforge@google.com, Oct 24 2011

Labels: -Mstone-16 MovedFrom-16 Mstone-17
Is anyone doing anything about this, or is there a scheduled release for this fix? Generated content transitions work in FF...

Comment 16 by k...@google.com, Dec 19 2011

Labels: -Mstone-17 MovedFrom-17
Removing milestone on all bugs marked available and targeted at m17.  Please re-triage to a new milestone if desired.
still nothing on this?
@drew.covi, you are right, it is not fixed even on Chrome 18.0.1015.0 canary and Mozilla supports it since Firefox 4.

Comment 19 by kareng@google.com, Jan 24 2012

mike these look like CSS please unassign urself if they are not.

Comment 20 by kareng@google.com, Jan 24 2012

Owner: mikelawther@chromium.org
Status: Assigned
mike these look like css, please unassign urself if they are not.
will this be fixed for Chrome 19? any news? :)
Nop. Not working in 19.0.1042.0.

Comment 24 by Deleted ...@, Mar 28 2012

I thought thirteen versions later this would be solved ? Firefox allows animations on pseudo-elements since version 4 or so. That's kind of problematic.
It's a pretty poor show really. I guess this is more a webkit issue though, is there an issue open on there?
see comment 23 here.... like 2 comments above yours...

https://bugs.webkit.org/show_bug.cgi?id=23209
Still doesnt work for 19.0.1084.41 beta :S

Thanks to this thread I stopped working on the "effect" on my site, because I was still wondering why the heck it doesnt work for me :S 
Needed this today, but only working in #FF
Sad to know that it's been over 3 years since this bug was filed by Faruk to the Webkit team (https://bugs.webkit.org/show_bug.cgi?id=23209) and still nothing. 
@clarke.d, there are tons of more bugs in the must featured browsers. And even simplest DOM and CSS rendering bugs, like parent and pseudo element height:100%, are still not fixed.
Ran across this today and thought I was doing something wrong.  Really surprising this hasn't yet been fixed.  :(
This is ridiculous. Good thing we have _web intents_
It would make my day to see this bug fixed. It really truly would. (btw webkit is amazing and I'm not trying to be a jerk...)
Firefox has already implemented on 4+, still waiting for Chrome team to implement this. Its pretty useful in certain conditions. I urge Chrome team to give it a thought.
I'm with you all, it would be great to see this bug finally fixed

Comment 37 by aveti...@gmail.com, Jul 24 2012

@mikelawther: which depends on https://bugs.webkit.org/show_bug.cgi?id=85253

That pretty sucks (in my opinion) because I feel like they won't move an inch on that one.

Comment 38 by p...@gummerson.com, Jul 24 2012

Useful for creating small animations which improve usability, or just for
motions which are only possible with javascript or flash without this.
We have waited a long time for this to be fixed.
Please implement asap! we all need it!
Thanks

Comment 40 Deleted

Seconded, it also appears that 127 other people want to see this fixed, too. Come on, devs!

Comment 42 by fun...@gmail.com, Jul 24 2012

If you continue spamming this issue Ill unstar it. So please stop commenting thx.
Instead of spamming comments, what can we do to be productive and move this issue towards completion?
@^ : I guess we could just go and spam here https://bugs.webkit.org/show_bug.cgi?id=85253 or here https://bugs.webkit.org/show_bug.cgi?id=23209

The bug depends on webkit  bug #23209  which depends itself on webkit  bug #85253 , so spamming here (or even there) has not much sense.

The best which can be done is either fix it (and make a patch) or wait.
if this was a webkit issue, then how come it doesn't happen in safari?  
Labels: -OS-Windows OS-All
Happening for me on Linux as well.
please get this bug fixed. would really be a nice feature!

Comment 48 by Deleted ...@, Aug 31 2012

Hope this bug get's fixed! Thanks in advance!
Cc: esprehn@chromium.org
Checking in on 24.0.1282.0 canary... still nothing.
If you're okay with animating the element, and having the pseudo element come along for the ride, here's an example of how to get that working: http://jsfiddle.net/darcyclarke/hWR8E/35/ (hover the snowman). The key thing there is the "display:inline-block" for the element, as well as keeping it empty so you won't create an offset for the animation. This may not be ideal for everyones use case, as you're probably hoping to animate the pseudo element separate of its parent, but it works.
@clarke

that kind of defeats the purpose of animating only the pseudo element...
Like I said, it doesn't solve everyone's problems. But it may help some people out that use things like icon fonts etc. where they can deal with having empty elements. Again, it doesn't look like the actual problem will be fixed soon, so this is something.
Cc: mikelawther@chromium.org
Labels: Webkit-ID-92591
Owner: esprehn@chromium.org
Project Member

Comment 55 by bugdroid1@chromium.org, Oct 5 2012

Labels: -Webkit-ID-92591 WebKit-ID-92591-ASSIGNED
https://bugs.webkit.org/show_bug.cgi?id=92591

Comment 56 Deleted

This is ridiculous.. I have been looking for this bug to be fixed since 2010...
Although it does not fix the issue, everyone affected by it might me interested in Roman Komarov's (http://kizu.ru/en/ & https://twitter.com/kizmarh) technique of tricking WebKit into transitions on pseudos via inheritance, as shown at this year's Fronteers conference jam session:

http://fronteers.nl/congres/2012/jam-session/use-css-transitions-for-pseudo-elements-right-now-roman-komarov
Two years and counting.. please add :D
Wow... waiting since 2010...

Comment 61 by Deleted ...@, Dec 16 2012

This would be great to have.
After I send an email to Peter Beverloo from Chrome team, seems the issue implementation is moving on. See the status in https://bugs.webkit.org/show_bug.cgi?id=92591
Project Member

Comment 63 by bugdroid1@chromium.org, Jan 2 2013

Labels: -WebKit-ID-92591-ASSIGNED WebKit-ID-92591-RESOLVED WebKit-Rev-138632
https://bugs.webkit.org/show_bug.cgi?id=92591
http://trac.webkit.org/changeset/138632
https://plus.google.com/u/0/110977198681221304891/posts/gmiJu2yTuN2 after 2 years awaiting this issue finally might be landed in next releases. Lots of developers are waiting for it.

WebKit has approved the related issue http://wkb.ug/92591 status as RESOLVED FIXED, changeset http://wkrev.com/138632.
There are more issues related to the same issue http://wkb.ug/23209, http://wkb.ug/85253. Unfortunately it can still hold its `push` on stable release.
all hail!
Chrome 26.0.1377.0 canary released with CSS3 transition support for pseudo elements. It still has some unresolved issues. http://peter.sh/2013/01/animatable-pseudo-elements-seamless-iframe-fixes-and-happy-2013/
Yay! Here's proof that it works in Chrome 26.0.1377.0 canary: http://codepen.io/zeke/pen/exLBp
Labels: Mstone-26
Status: Fixed
Summary: CSS3 transition not applied for :before and :after pseudo elements (was: CSS3 transition not applied for pseudo elements)

Comment 69 by matzi...@gmail.com, Jan 15 2013

2 years and 3 months. Go,go!
so when does it goes to production now that it has been fixed??
Yair, as you can see it is tagged under branch release version 26, what's currently under Dev branch.

As you can see in http://www.chromium.org/developers/calendar Chrome 26 stable release was already expected in Feb 11th, 2013?
Project Member

Comment 72 by bugdroid1@chromium.org, Mar 10 2013

Labels: -Area-WebKit -Mstone-26 Cr-Content M-26
Oh mein gott, I'm so happy this is finally fixed.

Comment 74 by igbe...@gmail.com, Mar 11 2013

Thought I would reiterate the thanks, one of the few bug's I've been watching, thank you! 
Just updated to 25.0.1364.160 m, still broken: http://jsfiddle.net/2EUGw/
Sorry for the repeat email. Here's a better fiddle demo: http://jsfiddle.net/2EUGw/1/
Jason, this issue will land just on Chrome 26 stable, not expected to support on version 25. Your demo is not related to the issue, see the test case demo http://jsfiddle.net/4rnsx/88/ (it still not working on 25, but works well on Chrome Canary).
I'm seeing page jiggle with a translateY transition.... ill put up a fiddle soon. sad.
Project Member

Comment 79 by bugdroid1@chromium.org, Apr 6 2013

Labels: -Cr-Content Cr-Blink

Sign in to add a comment