Bug 134546 - CSS transitions applied to pseudo elements are stifled by changing content
Summary: CSS transitions applied to pseudo elements are stifled by changing content
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All OS X 10.9
: P2 Normal
Assignee: Nobody
URL: https://colons.co/pseudo/
Keywords:
Depends on:
Blocks:
 
Reported: 2014-07-02 06:18 PDT by colons
Modified: 2022-07-13 17:21 PDT (History)
1 user (show)

See Also:


Attachments
HTML document on which this bug is observable (921 bytes, text/html)
2014-07-02 06:19 PDT, colons
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description colons 2014-07-02 06:18:09 PDT
Steps to reproduce:

- Visit https://colons.co/pseudo/ or load up the attached HTML file in Safari
- Click 'unchanging' and observe the transition successfully applied to a pseudo-element
- Click 'inactive', and observe the animation getting ignored

Note that that page has no styles whatsoever applied to non-pseudo elements. The only difference between the pseudo elements is that the content is changed on one when it is class="active". That shouldn't be enough to break transitions.

Observed on iOS and OS X. Firefox and Chrome exhibit no such problem.

You can work around it by associating the content change with a different class name and setting a timeout to change the visual active state, but this approach is not foolproof.
Comment 1 colons 2014-07-02 06:19:30 PDT
Created attachment 234261 [details]
HTML document on which this bug is observable
Comment 2 colons 2014-12-18 07:15:37 PST
Still observable in the latest nightly (r177473). Firefox's behaviour has degraded a little, to a slight flickering followed by the correct behaviour. Chrome Canary is still fine.
Comment 3 Brent Fulgham 2022-07-13 17:21:33 PDT
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.