If I go to https://getbootstrap.com/docs/4.1/components/carousel/#with-captions and click the right arrow on the carousel, the animation from slide 1 to slide 2 partially restarts upon completion. Disabling Web Animations no longer reproduces this issue, although there are other flashing issues. This was originally reported on a Bootstrap GitHub thread https://github.com/twbs/bootstrap/issues/31038.
<rdar://problem/64531242>
Clicking on the right arrow triggers two transitions: CSSTransition for transform going from none to matrix(1, 0, 0, 1, -1237.5, 0) running for 600ms on <div class="carousel-item active carousel-item-left"> with progress = 0 CSSTransition for transform going from matrix(1, 0, 0, 1, 1237.5, 0) to matrix(1, 0, 0, 1, 0, 0) running for 600ms on <div class="carousel-item carousel-item-next carousel-item-left"> with progress = 0 Then upon completion, around 600ms later, this transition is triggered: CSSTransition for transform going from matrix(1, 0, 0, 1, 1237.5, 0) to none running for 600ms on <div class="carousel-item active"> with progress = 0 The first two transitions are created by the first CSSTransition::create() statement under AnimationTimeline::updateCSSTransitionsForElementAndProperty(), whereas the third one, which should not happen, is triggered by the third CSSTransition::create() statement.
We end up comparing two TransformOperations, one which has no operations, and one which has one but has x=0 and y=0. But TransformOperations::operator== returns false because there is size check first which returns false if they differ. We should teach TransformOperations to check for an identity transform here in case one of the lengths is 0.
Created attachment 403105 [details] Patch
Committed r263729: <https://trac.webkit.org/changeset/263729> All reviewed patches have been landed. Closing bug and clearing flags on attachment 403105 [details].