CSS transitions applied to pseudo elements are stifled by changing content

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[colons]

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.

[colons]

Created attachment 234261 [details]
HTML document on which this bug is observable

[colons]

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.

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.