Bug 134546

Summary: CSS transitions applied to pseudo elements are stifled by changing content
Product: WebKit Reporter: colons <webkit-bugzilla>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: bfulgham
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: OS X 10.9   
URL: https://colons.co/pseudo/
Attachments:
Description Flags
HTML document on which this bug is observable none

colons
Reported 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.
Attachments
HTML document on which this bug is observable (921 bytes, text/html)
2014-07-02 06:19 PDT, colons 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
colons
Comment 1 2014-07-02 06:19:30 PDT
Created attachment 234261 [details] HTML document on which this bug is observable
colons
Comment 2 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.
Brent Fulgham
Comment 3 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.
Note You need to log in before you can comment on or make changes to this bug.