Re: [csswg-drafts] [css-transitions] starting an animation and a transition with equal values yields some incompatible behavior between Safari, Chrome and Firefox (#8701)

Here's the exact logging coming from those browsers with that sample:

### Chrome

```
After starting animations width is 0px and getAnimations() yields [CSSAnimation from 0px to 1000px]
One frame after starting animations width is 8.32812px and getAnimations() yields [CSSAnimation from 0px to 1000px]
100ms after starting animations width is 99.9922px and getAnimations() yields [CSSAnimation from 0px to 1000px]
500ms after starting animations width is 499.977px and getAnimations() yields [CSSAnimation from 0px to 1000px]
```

### Firefox

```
After starting animations width is 0px and getAnimations() yields [CSSTransition from 0px to 1000px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 6.23333px and getAnimations() yields [CSSTransition from 0px to 1000px, CSSAnimation from 0px to 1000px]
One frame after starting animations width is 6.23333px and getAnimations() yields [CSSTransition from 0px to 1000px, CSSAnimation from 0px to 1000px]
100ms after starting animations width is 97.9px and getAnimations() yields [CSSTransition from 0px to 1000px, CSSAnimation from 0px to 1000px]
After transitionend fired width is 256.233px and getAnimations() yields [CSSAnimation from 0px to 1000px]
500ms after starting animations width is 497.9px and getAnimations() yields [CSSAnimation from 0px to 1000px]
```

### Safari

```
After starting animations width is 0px and getAnimations() yields [CSSTransition from 0px to 1000px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 0px and getAnimations() yields [CSSAnimation from 0px to 1000px]
One frame after starting animations width is 0px and getAnimations() yields [CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 13px and getAnimations() yields [CSSTransition from 0px to 13px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 13px and getAnimations() yields [CSSTransition from 0px to 13px, CSSAnimation from 0px to 1000px]
After transitionend fired width is 13px and getAnimations() yields [CSSTransition from 0px to 13px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 29px and getAnimations() yields [CSSTransition from 0.832px to 29px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 46px and getAnimations() yields [CSSTransition from 2.747424px to 46px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 46px and getAnimations() yields [CSSTransition from 2.747424px to 46px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 63px and getAnimations() yields [CSSTransition from 5.688599px to 63px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 63px and getAnimations() yields [CSSTransition from 5.688599px to 63px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 79px and getAnimations() yields [CSSTransition from 9.356529px to 79px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 79px and getAnimations() yields [CSSTransition from 9.356529px to 79px, CSSAnimation from 0px to 1000px]
100ms after starting animations width is 79px and getAnimations() yields [CSSTransition from 9.356529px to 79px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 96px and getAnimations() yields [CSSTransition from 14.092285px to 96px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 96px and getAnimations() yields [CSSTransition from 14.092285px to 96px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 113px and getAnimations() yields [CSSTransition from 19.66201px to 113px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 113px and getAnimations() yields [CSSTransition from 19.66201px to 113px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 129px and getAnimations() yields [CSSTransition from 25.635641px to 129px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 129px and getAnimations() yields [CSSTransition from 25.635641px to 129px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 146px and getAnimations() yields [CSSTransition from 32.664417px to 146px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 146px and getAnimations() yields [CSSTransition from 32.664417px to 146px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 163px and getAnimations() yields [CSSTransition from 40.371239px to 163px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 163px and getAnimations() yields [CSSTransition from 40.371239px to 163px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 179px and getAnimations() yields [CSSTransition from 48.219479px to 179px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 179px and getAnimations() yields [CSSTransition from 48.219479px to 179px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 196px and getAnimations() yields [CSSTransition from 57.112553px to 196px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 196px and getAnimations() yields [CSSTransition from 57.112553px to 196px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 213px and getAnimations() yields [CSSTransition from 66.5569px to 213px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 213px and getAnimations() yields [CSSTransition from 66.5569px to 213px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 229px and getAnimations() yields [CSSTransition from 75.92926px to 229px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 229px and getAnimations() yields [CSSTransition from 75.92926px to 229px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 256px and getAnimations() yields [CSSTransition from 92.460899px to 256px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 256px and getAnimations() yields [CSSTransition from 92.460899px to 256px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 263px and getAnimations() yields [CSSTransition from 97.039993px to 263px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 263px and getAnimations() yields [CSSTransition from 97.039993px to 263px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 279px and getAnimations() yields [CSSTransition from 107.66143px to 279px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 279px and getAnimations() yields [CSSTransition from 107.66143px to 279px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 296px and getAnimations() yields [CSSTransition from 119.312454px to 296px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 296px and getAnimations() yields [CSSTransition from 119.312454px to 296px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 313px and getAnimations() yields [CSSTransition from 131.327209px to 313px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 313px and getAnimations() yields [CSSTransition from 131.327209px to 313px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 329px and getAnimations() yields [CSSTransition from 142.954269px to 329px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 329px and getAnimations() yields [CSSTransition from 142.954269px to 329px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 346px and getAnimations() yields [CSSTransition from 155.605377px to 346px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 346px and getAnimations() yields [CSSTransition from 155.605377px to 346px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 363px and getAnimations() yields [CSSTransition from 168.552216px to 363px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 363px and getAnimations() yields [CSSTransition from 168.552216px to 363px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 379px and getAnimations() yields [CSSTransition from 180.996872px to 379px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 379px and getAnimations() yields [CSSTransition from 180.996872px to 379px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 396px and getAnimations() yields [CSSTransition from 194.46109px to 396px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 396px and getAnimations() yields [CSSTransition from 194.46109px to 396px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 413px and getAnimations() yields [CSSTransition from 208.165741px to 413px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 413px and getAnimations() yields [CSSTransition from 208.165741px to 413px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 429px and getAnimations() yields [CSSTransition from 221.275131px to 429px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 429px and getAnimations() yields [CSSTransition from 221.275131px to 429px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 446px and getAnimations() yields [CSSTransition from 235.400421px to 446px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 446px and getAnimations() yields [CSSTransition from 235.400421px to 446px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 463px and getAnimations() yields [CSSTransition from 249.721191px to 463px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 463px and getAnimations() yields [CSSTransition from 249.721191px to 463px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 479px and getAnimations() yields [CSSTransition from 263.371033px to 479px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 479px and getAnimations() yields [CSSTransition from 263.371033px to 479px, CSSAnimation from 0px to 1000px]
500ms after starting animations width is 479px and getAnimations() yields [CSSTransition from 263.371033px to 479px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 496px and getAnimations() yields [CSSTransition from 278.033813px to 496px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 496px and getAnimations() yields [CSSTransition from 278.033813px to 496px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 513px and getAnimations() yields [CSSTransition from 292.855499px to 513px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 513px and getAnimations() yields [CSSTransition from 292.855499px to 513px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 529px and getAnimations() yields [CSSTransition from 306.944733px to 529px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 529px and getAnimations() yields [CSSTransition from 306.944733px to 529px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 546px and getAnimations() yields [CSSTransition from 322.044495px to 546px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 546px and getAnimations() yields [CSSTransition from 322.044495px to 546px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 563px and getAnimations() yields [CSSTransition from 337.273468px to 563px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 563px and getAnimations() yields [CSSTransition from 337.273468px to 563px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 579px and getAnimations() yields [CSSTransition from 351.719971px to 579px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 579px and getAnimations() yields [CSSTransition from 351.719971px to 579px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 596px and getAnimations() yields [CSSTransition from 367.175018px to 596px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 596px and getAnimations() yields [CSSTransition from 367.175018px to 596px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 613px and getAnimations() yields [CSSTransition from 382.735107px to 613px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 613px and getAnimations() yields [CSSTransition from 382.735107px to 613px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 629px and getAnimations() yields [CSSTransition from 397.472046px to 629px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 629px and getAnimations() yields [CSSTransition from 397.472046px to 629px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 646px and getAnimations() yields [CSSTransition from 413.215942px to 646px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 646px and getAnimations() yields [CSSTransition from 413.215942px to 646px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 663px and getAnimations() yields [CSSTransition from 429.045258px to 663px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 663px and getAnimations() yields [CSSTransition from 429.045258px to 663px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 679px and getAnimations() yields [CSSTransition from 444.018372px to 679px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 679px and getAnimations() yields [CSSTransition from 444.018372px to 679px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 696px and getAnimations() yields [CSSTransition from 459.997131px to 696px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 696px and getAnimations() yields [CSSTransition from 459.997131px to 696px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 713px and getAnimations() yields [CSSTransition from 476.045319px to 713px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 713px and getAnimations() yields [CSSTransition from 476.045319px to 713px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 729px and getAnimations() yields [CSSTransition from 491.210419px to 729px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 729px and getAnimations() yields [CSSTransition from 491.210419px to 729px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 746px and getAnimations() yields [CSSTransition from 507.380096px to 746px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 746px and getAnimations() yields [CSSTransition from 507.380096px to 746px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 763px and getAnimations() yields [CSSTransition from 523.606262px to 763px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 763px and getAnimations() yields [CSSTransition from 523.606262px to 763px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 779px and getAnimations() yields [CSSTransition from 538.92749px to 779px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 779px and getAnimations() yields [CSSTransition from 538.92749px to 779px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 796px and getAnimations() yields [CSSTransition from 555.252441px to 796px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 796px and getAnimations() yields [CSSTransition from 555.252441px to 796px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 813px and getAnimations() yields [CSSTransition from 571.623291px to 813px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 813px and getAnimations() yields [CSSTransition from 571.623291px to 813px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 829px and getAnimations() yields [CSSTransition from 587.071411px to 829px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 829px and getAnimations() yields [CSSTransition from 587.071411px to 829px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 846px and getAnimations() yields [CSSTransition from 603.522583px to 846px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 846px and getAnimations() yields [CSSTransition from 603.522583px to 846px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 863px and getAnimations() yields [CSSTransition from 620.011047px to 863px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 863px and getAnimations() yields [CSSTransition from 620.011047px to 863px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 879px and getAnimations() yields [CSSTransition from 635.562317px to 879px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 879px and getAnimations() yields [CSSTransition from 635.562317px to 879px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 896px and getAnimations() yields [CSSTransition from 652.116089px to 896px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 896px and getAnimations() yields [CSSTransition from 652.116089px to 896px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 913px and getAnimations() yields [CSSTransition from 668.700195px to 913px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 913px and getAnimations() yields [CSSTransition from 668.700195px to 913px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 929px and getAnimations() yields [CSSTransition from 684.335388px to 929px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 929px and getAnimations() yields [CSSTransition from 684.335388px to 929px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 945px and getAnimations() yields [CSSTransition from 699.993896px to 945px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 945px and getAnimations() yields [CSSTransition from 699.993896px to 945px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 963px and getAnimations() yields [CSSTransition from 717.634338px to 963px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 963px and getAnimations() yields [CSSTransition from 717.634338px to 963px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 979px and getAnimations() yields [CSSTransition from 733.337769px to 979px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 979px and getAnimations() yields [CSSTransition from 733.337769px to 979px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 996px and getAnimations() yields [CSSTransition from 750.042786px to 996px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 996px and getAnimations() yields [CSSTransition from 750.042786px to 996px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 1000px and getAnimations() yields [CSSTransition from 766.767883px to 1000px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 1000px and getAnimations() yields [CSSTransition from 766.767883px to 1000px, CSSAnimation from 0px to 1000px]
After transitioncancel fired width is 1000px and getAnimations() yields [CSSTransition from 766.767883px to 1000px, CSSAnimation from 0px to 1000px]
After transitionstart fired width is 1000px and getAnimations() yields [CSSTransition from 766.767883px to 1000px, CSSAnimation from 0px to 1000px]
After transitionend fired width is 1000px and getAnimations() yields [CSSAnimation from 0px to 1000px]
```

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


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

Received on Tuesday, 11 April 2023 14:43:20 UTC