134546 2014-07-02 06:18:09 -0700 CSS transitions applied to pseudo elements are stifled by changing content 2022-07-13 17:21:33 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) All OS X 10.9 RESOLVED CONFIGURATION CHANGED https://colons.co/pseudo/ P2 Normal --- 1 webkit-bugzilla webkit-unassigned bfulgham oldest_to_newest 1019959 0 webkit-bugzilla 2014-07-02 06:18:09 -0700 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. 1019960 1 234261 webkit-bugzilla 2014-07-02 06:19:30 -0700 Created attachment 234261 HTML document on which this bug is observable 1056776 2 webkit-bugzilla 2014-12-18 07:15:37 -0800 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. 1883486 3 bfulgham 2022-07-13 17:21:33 -0700 Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue. 234261 2014-07-02 06:19:30 -0700 2014-07-02 06:19:30 -0700 HTML document on which this bug is observable pseudo.html text/html 921 webkit-bugzilla PCFkb2N0eXBlIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICBsaTo6YmVm b3JlIHsKICAgICAgICBvcGFjaXR5OiAwLjU7CiAgICAgICAgdHJhbnNpdGlvbjogcGFkZGluZy1s ZWZ0IDFzLCBvcGFjaXR5IDFzOwogICAgICB9CgogICAgICAuYWN0aXZlOjpiZWZvcmUgewogICAg ICAgIHBhZGRpbmctbGVmdDogMWVtOwogICAgICAgIG9wYWNpdHk6IDE7CiAgICAgIH0KCiAgICAg ICN1bmNoYW5naW5nOjpiZWZvcmV7CiAgICAgICAgY29udGVudDogJ3VuY2hhbmdpbmcnCiAgICAg IH0KCiAgICAgICNjaGFuZ2luZzo6YmVmb3JlewogICAgICAgIGNvbnRlbnQ6ICdpbmFjdGl2ZScK ICAgICAgfQoKICAgICAgI2NoYW5naW5nLmFjdGl2ZTo6YmVmb3JlewogICAgICAgIGNvbnRlbnQ6 ICdhY3RpdmUnCiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgx PkNsaWNrIHRoZXNlOjwvaDE+CiAgICA8dWw+CiAgICAgIDxsaSBpZD0ndW5jaGFuZ2luZyc+PC9s aT4KICAgICAgPGxpIGlkPSdjaGFuZ2luZyc+PC9saT4KICAgIDwvdWw+CgogICAgPHNjcmlwdD4K ICAgICAgZnVuY3Rpb24gYmluZENsaWNraW5nVG9Ub2dnbGVBY3RpdmUoZWxlbWVudCkgewogICAg ICAgIGVsZW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbigpIHsKICAgICAg ICAgIGVsZW1lbnQuY2xhc3NMaXN0LnRvZ2dsZSgnYWN0aXZlJyk7CiAgICAgICAgfSk7CiAgICAg IH0KCiAgICAgIGJpbmRDbGlja2luZ1RvVG9nZ2xlQWN0aXZlKGRvY3VtZW50LmdldEVsZW1lbnRC eUlkKCd1bmNoYW5naW5nJykpOwogICAgICBiaW5kQ2xpY2tpbmdUb1RvZ2dsZUFjdGl2ZShkb2N1 bWVudC5nZXRFbGVtZW50QnlJZCgnY2hhbmdpbmcnKSk7CiAgICA8L3NjcmlwdD4KICA8L2JvZHk+ CjwvaHRtbD4K