Re: [csswg-drafts] [css-transforms-1] [css-transitions-1] Strange behavior with `insertBefore` vs `appendChild` and transitions (#5334)

And here's it simplified and deconstructed using two elements, one static and alternating remove/add, the other animated:

- [Both smooth by removing all then adding all](https://flems.io/#0=N4Igxg9gdgzhA2BTEAucD4EMAONEBMQAaEAMwEskZUBtUKTAW2TQDoALAF0fmPSk6IBqEAB4ArvAAE5fAF4AOiExRyjTIKUA+UfHJaADKID0enWYCMJsycla+eJGE7lo1NAZQBmAOwgAvkT0TCwgrABW1CSQAkKcIsbGUgBimM4QAE4EUhDinFJwMpwA5DBSYEiYWRlSAO7sGlKISMwCZVWIUpj4+Nkq+FJZjBAAbgQKUBMxMPkqahqIAEoQEPlyUvgQYOKtnKwA5oicAKItcQBCAJ4AkvgAFEpz6pogAJRTbvnNiIwGUutPBbLVasMDsSj4AByEF6MBoBgAuh9YF8WhZ-l1VM8lis9mCIdDYTQLEjJlBEl0egQUFJafCiFISRMKUNRtSpMTSRNSOIoM5XFBBj82XdXlJgFIKd1egMALRaIXDMb4Ca0vCcAAqakQuU4d2lDIArAYDO9BVJVZKkslyBkZpbpvkKHbOAAmDHfRgWA5Hc65KD4chQfYAYT0cUWiGcotYnAg2AmlopAFVsPgFhyDAySVJ5RymebAYJgXtWWMQ+D4PdPabLUWcSCy4gKxC7p6LGbafWS6wcNghPgW1W22izUmkgAZTAzKQAaik1ygYwynHHUmhghpiCq4ZqAANOBkVDByC5oAARcRHs9QPdSRjiGcAI066qkL9ImU6WEEGTXB6PWBPwyRg9wZTImjGQVhiyOpEFtfAoEQGAyi2bY7SkO5wkffJD0uIpMQGPBEDXepGgabB+1gV5WEtdtWBmS4kFjQCTxvS9rwFDElAMGAlDotEGM4JjEBY49gMYDEAOPH9EAATTuAASYBnRmd1ZSaQTDk4P1eUDYMw3ICMoz1Gi42wfxsAAD1ePdE3NClkkyMBOiyWUsEuXVLU2bZdlYJ8YUuVgIFIUh1QACXg-YuHs2kKQABQ8gSfm9CppxgCdyBmXsegeEBD2PU8BSUTtNJSoSRLEoDMkk9Z6MY5iCtgIqLyvDQuPWfiQAmfx7J5Pkb0pe4xQlFlhWVXMFWlcZzXVLVmF1O4myNE1SrXG0XQdT4pFUt0PS031-X00NwwESNozM+NYqtKRU3TQR8wRSbM2zUkuyxIFcVYJsh2rUc6w+4svr7AdfpHH5a0LQGGz2EGAzB9sxwcydp3yedF2XVdkfXVZEC3HcjP3Jq2IFDj2ugO8H2fV8jnfRBgO-BY-2x6TqpAsCchqRAoPvL84IQpCUJyMB0LKLCcKkPCCP6ApEBI7GyPyCiqJgGjkq9CrGtYlqoDJwbOpAXj+PNerhK18Saqk4nZIU5TdvUsqNe03SAyDE6jLOkyY3MyybLssk4utZzXMQdzME8vJvK2HY4n8wLgtCiKopigObsS8P1dSrAUMy7LpTy4mdZKzPNdE4mJP28qGrL7X2La-WLW67qoF6sk5u1RblqkY1TT4SBGGwShEAyVAoEkeASEcEyBXcEALC8FALFdAIghABhmBEUEUL76BBGENhC8G4BLUPgUaVdMpy5qgBuHqHG+fk3BECwUFdAA2WUX4sAAWAIEX8IAA)
- [Remove smooth by removing all then adding all, but add is glitchy](https://flems.io/#0=N4Igxg9gdgzhA2BTEAucD4EMAONEBMQAaETAVwBcIAlReCTQlAM03jxOYEskZUBtUFEwBbZGgB0ACwoj4xdFAqIlqEAB4y8AARd8AXgA6pKFxGZlxgHzr4XKwAZ1Aejs23ARhduXWqwrwkMAouaD40BxQAZgB2EABfIiFRcRAJACs+EkglFQo1Z2dtADFMYIgAJwJtCEptOF0KAHIYbTAkTCqK7QB3KQttOkQxJVbOxG1GfGrMKHxtKpEIADcCQyh1nJgKSdNzZWoICB39bXwIMDIRigkAc0QKAFEka4AhAE8ASXwACmNZswWRDGACUmzCOyGIgc2lOAP2iEOxwkYCkPHwADkINMYPwHABdcGwSEvDyw3aAg5HG6o9FYnH8DyEjZQQqTfDTfAobQ8vFEbRM9ZsxYrAjcxnM9bMMhQYKhKALYain4g7TAbRsqbVAC0VkVS1W+HWPLwFAAKmZELUKD8pvyAKwOBxghXaY0aorFLgVbburY7bg+igAJnJUI8dwer1qcy4UFuAGE7HlaMEVRIqNh1u62QBVbD4IHaPkC-HaXXFwWu+FApE3EWrBNo+C-KHO901qnIhuIJvon7hl08zuI6kSHDYFT4Pstgekl05ooAGUw220AGptJ8oKsKhRF9oscpuYhOsnugADCgVWYwLghaAAETIN4fUAv2hEZDXACMJqbtD-ZhKgmLBlAqA8rxvWBgIqEQL35SpBlWBUliqXpEG9fAoEQGBWguS4fW0H50m-HZr3eRpdnmPBgVdNk+gGfpsEnWAQQkd1wwkbZ3iQDNoLvN9n1feVyWMBwYGMTjSW4iheMQfjb1gkRySg28wMQABNH4ABJgEDbZQ21QYZPuChoxlfA40TZMlFTG12MzeJsAADxBC9s3oz1KjACYqm1LB3mtd1zkua4JB-bF3gkCBmGYU0AAlMNuGRPJ5NkAAVAuk4YI3aVcYCXLhtnHDk-hAa9b3veVQRykQIx4vjKpgyoVNOLjGoU5rBPlYSLFE04pJAdZ4k86VZTfdlflVdVhSVQ1yz1LUjVdU0LTEa0fh7B0nSHN0vJKb1fVdf1tAMkMw1MqMYys+Mky4FNEDTRyICzFl0qKfNC2USsywrEsq2HPZazHOM8D3V5EFgxA52GBx+UHNKPW0Fc103bdd33A6j0QE8zwey9uuqp8X366APy-X9-weQCoZA7QNIgg61JauCEJqbpEBQz96Z6TCKmw3D8LAQjWhIsjtAoqjZhoxA6I+3p+h2ZjWJgdi6oauSmoE4moD6ybBpACSpNdDqta6gTlNU7qNO0vTzqMkzcsjcybus+7HuejNXuctyPPe5Hih8vzEACzAgsoEKLiuPIIqimK4sS5LUoDzLstNmT8rwoqSqmcqibfWqM+dzrFNZtqnfq2T5LLnqSZE6AxOG4aoFGlk1stTbtu0R1nQUSARGwHhEAqVAoC0eASECJ633CEAPAADmiYMEiSEBhDENQUTw-voGUVRJAL0TgHdI-oG5YNWm65SAG4RoCIY5TCNQPBQYMADZtVfjwABYEnxeIQA)
- [Add smooth by removing all then adding all, but remove is glitchy](https://flems.io/#0=N4Igxg9gdgzhA2BTEAucD4EMAONEBMQAaETAVwBcIAlReCTQlAM03jxOYEskZUBtUFEwBbZGgB0ACwoj4xdFAqIlqEAB4y8AARd8AXgA6pKFxGZlxgHzr4XKwAZ1Aejs23ARhduXWqwrwkMAouaD40BxQAZgB2EABfIiFRcRAJACs+EkglFQo1Z2dtADFMYIgAJwJtCEptOF0KAHIYbTAkTCqK7QB3KQttOkQxJVbOxG1GfGrMKHxtKpEIADcCQyh1nJgKSdNzZWoICB39bXwIMDIRigkAc0QKAFEka4AhAE8ASXwACmNZswWRDGACUmzCOyGIgc2lOAP2iEOxwkYCkPHwADkINMYPwHABdcGwSEvDyw3aAg5HG6o9FYnH8DyEjZQQqTfDTfAobQ8vFEbRM9ZsxYrAjcxnM9bMMhQYKhKALYain4g7TAbRsqbVAC0VkVS1W+HWPLwFAAKmZELUKD8pvyAKwOBxghXaY0aorFLgVbburY7bg+igAJnJUI8dwer1qcy4UFuAGE7HlaMEVRIqNh1u62QBVbD4IHaPkC-HaXXFwWu+FApE3EWrBNo+C-KHO901qnIhuIJvon7hl08zuI6kSHDYFT4Pstgekl05ooAGUw220AGptJ8oKsKhRF9oscpuYhOsnugADCgVWYwLghaAAETIN4fUAv2hEZDXACMJqbtD-ZhKgmLBlAqA8rxvWBgIqEQL35SpBlWBUliqXpEG9fAoEQGBWguS4fW0H50m-HZr3eRpdnmPBgVdNk+gGfpsEnWAQQkd1wwkbZ3iQDNoLvN9n1feVyWMBwYGMTjSW4iheMQfjb1gkRySg28wMQABNH4ABJgEDbZQ21QYZPuChoxlfA40TZMlFTG12MzeJsAADxBC9s3oz1KjACYqm1LB3mtd1zkua4JB-bF3gkCBmGYU0AAlMNuGRPJ5NkAAVAuk4YI3aVcYCXLhtnHDk-hAa9b3veVQRykQIx4vjKpgyoVNOLjGoU5rBPlYSLFE04pJAdZ4k86VZTfdlflVdVhSVQ1yz1LUjVdU0LTEa0fh7B0nSHN0vJKb1fVdf1tAMkMw1MqMYys+Mky4FNEDTRyICzFl0qKfNC2USsywrEsq2HPZazHOM8D3V5EFgxA52GBx+UHNKPW0Fc103bdd33A6j0QE8zwey9uuqp8X366APy-X9-weQCoZA7QNIgg61JauCEJqbpEBQz96Z6TCKmw3D8LAQjWhIsjtAoqjZhoxA6I+3p+h2ZjWJgdi6oauSmoE4moD6ybBpACSpNdDqta6gTlNU7qNO0vTzqMkzcsjcybus+7HuejNXuctyPPe5Hih8vzEACzAgsoEKLiuPIIqimK4sS5LUoDzLstNmT8rwoqSqmcqibfWqM+dzrFNZtqnfq2T5LLnqSZE6AxOG4aoFGlk1stTbtu0R1nQUSARGwHhEAqVAoC0eASECJ633CEAPAADmiYMEiSEBhDENQUTw-voGUVRJAL0TgHdI-oG5YNWm65SAG4RoCIY5TCNQPBQYMADZtVfjwABYEnxeIQA)
- [Both glitchy](https://flems.io/#0=N4Igxg9gdgzhA2BTEAucD4EMAONEBMQAaETAVwBcIAlReCTQlAM03jxOYEskZUBtUFEwBbZGgB0ACwoj4xdFAqIlqEAB4y8AARd8AXgA6pKFxGZlxgHzr4XKwAZ1Aejs23ARhduXWqwrwkMAouaD40BxQAZgB2EABfIiFRcRAJACs+EkglFQo1Z2dtADFMYIgAJwJtCEptOF0KAHIYbTAkTCqK7QB3KQttOkQxJVbOxG1GfGrMKHxtKpEIADcCQyh1nJgKSdNzZWoICB39bXwIMDIRigkAc0QKAFEka4AhAE8ASXwACmNZswWRDGACUmzCOyGIgc2lOAP2iEOxwkYCkPHwADkINMYPwHABdcGwSEvDyw3aAg5HG6o9FYnH8DyEjZQQqTfDTfAobQ8vFEbRM9ZsxYrAjcxnM9bMMhQYKhKALYain4g7TAbRsqbVAC0VkVS1W+HWPLwFAAKmZELUKD8pvyAKwOBxghXaY0aorFLgVbburY7bg+igAJnJUI8dwer1qcy4UFuAGE7HlaMEVRIqNh1u62QBVbD4IHaPkC-HaXXFwWu+FApE3EWrBNo+C-KHO7OutkAGUw220AGptJ8oKsKhQc0UscpuYhOsnugADCgVWYwLghaAAETIK43UAX2hEZD7ACMJqbtGfmJUJlhlBUJ9olyvYNeKiIF-zKoNVgqllVekQb18CgRAYFaC5Lh9bQfnSY8dmXd5Gl2eY8GBTsij6AZ+mwbAVBgEEJHdcMJG2d4kAzF81z3bdd3lcljAcGBjGI0lSIocjEEo1c3xEcln1XO9EAATR+AASYBA22UNtUGNj7goaMZXwONE2TJRUxtQjM3ibAAA8QQXDseTZYpKjACYqm1LB3mtd1zkua4JBPbF3gkCBmGYU0AAkgNuGRjI9bQAAUbNY4YI3aXsYC7LhtgkKY-hAZdV3XeVQXCkQIzIiiUtfSo+NOEicq4vLqPlWiLHo04WJAdZ4g7aVZT3dlflVdVhSVQ1yz1LUjVdU0LTEa0fgbRAHSdF0eUfL0gz9CFtCkkMw3kqMYxU+Mky4FNEDTbSICzFkTKKfNC2USsywrEsqx5GsqWROM8DHV5EDfRAfjbflwxdR8ez7Qdh1HccMO0KdEBnOdtsXMq0q3HcqugA8j1Pc8HkvV6b20ISHxBgT8vfT8am6RBf0PTGeiAioQLAiCwCg1pYPg7REOQ2ZUMQdDjt6fodhwvDYEIzLso43KqNhqBKpamqQCYljXWKkXSqo3j+LKoTRIkpaZLkiLI0U9bVK2na9ozA7dIMoyjqCsyKgsxVrMwWzKHsi4rjyZzXPczyfL8gKrbZULHaFlEsHA2L4sS4wYb3DL5bYkruPxwqday9jOMT8q4bo6AGLquqoAallBstEaxom50FEgERsB4RAKlQKAtHgRJkjENQUXAyvoGUVRJGj+jgHdfvoG5YNWjK3iAG56oCIY5TCNQPBQYMADZtSXjwABYEnxeIgA)

The only ones smooth are removing all nodes and re-adding the ones desired - no implicit removal is necessary. And it only affects nodes that are *not* removed. I've confirmed this in both Chrome and Firefox on Windows.

-- 
GitHub Notification of comment by isiahmeadows
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5334#issuecomment-690873732 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 11 September 2020 04:58:39 UTC