Bug 213376

Summary: [Web Animations] REGRESSION: Bootstrap Carousel component v4.1 regressed with Web Animations
Product: WebKit Reporter: Antoine Quint <graouts>
Component: AnimationsAssignee: Antoine Quint <graouts>
Status: RESOLVED FIXED    
Severity: Normal CC: dino, graouts, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
URL: https://getbootstrap.com/docs/4.1/components/carousel/#with-captions
Attachments:
Description Flags
Patch none

Description Antoine Quint 2020-06-19 07:40:58 PDT
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.
Comment 1 Radar WebKit Bug Importer 2020-06-19 07:41:27 PDT
<rdar://problem/64531242>
Comment 2 Antoine Quint 2020-06-25 08:47:34 PDT
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.
Comment 3 Antoine Quint 2020-06-25 09:20:33 PDT
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.
Comment 4 Antoine Quint 2020-06-29 13:25:02 PDT
Created attachment 403105 [details]
Patch
Comment 5 EWS 2020-06-29 22:56:58 PDT
Committed r263729: <https://trac.webkit.org/changeset/263729>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 403105 [details].