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

Antoine Quint
Reported 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.
Attachments
Patch (13.84 KB, patch)
2020-06-29 13:25 PDT, Antoine Quint
no flags
Radar WebKit Bug Importer
Comment 1 2020-06-19 07:41:27 PDT
Antoine Quint
Comment 2 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.
Antoine Quint
Comment 3 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.
Antoine Quint
Comment 4 2020-06-29 13:25:02 PDT
EWS
Comment 5 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].
Note You need to log in before you can comment on or make changes to this bug.