Skip to content

Skew behavior inconsistent with other implementations #182

@rjwright

Description

@rjwright

Skew has some problems. Blink Web Animations and Blink Transitions behave the same, but Blink, FireFox and this polyfill all behave differently. I have no idea who is right or what is going on. I will relay some of my observations below. I will omit the data from Blink Web Animations because it's the same as Blink transitions

Tested at time fraction 0.5:

translate(1px)
skew(60deg)

PolyfillWA: matrix(1, 0, 0.87, 1, 0.49, 0)
BlinkTrans: matrix(1, 0, 0.87, 1, 0.50, 0)
FirefTrans: matrix(1, 0, 0.86, 1, 0.50, 0)
All looked the same and as expected

skew(1px)
skew(0deg, 60deg)

PolyfillWA: matrix(1.30, 0.76, 0.19, 0.97, 0.50, 0)
BlinkTrans: matrix(1.30, 0.75, 0.19, 0.97, 0.50, 0)
FirefTrans: matrix(1.30, 0.75, 0.19, 0.97, 0.50, 0)
All looked the same and as expected

skew(1px)
skew(60deg, 60deg)

PolyfillWA: matrix3d(-0.12, 0.23, -0.44, 0, 0.00, 0.00, -0.01, 0, 0.01, 0.00, 0.00, 0, 0.50, 0, 0, 1) - performs some turns
BlinkTrans: matrix3d(-0.13, 0.22, -0.43, 0, 0.00, 0.00, 0.00, 0, 0.000, 0.00, 0.00, 0, 0.50, 0, 0, 1) - no turns, snap at end
FirefTrans: matrix(-0.25, 0.43, 0.43, 1.25, 0.50, 0) - turns, but different to the polyfill

translate(1px)
skew(60deg, 30deg)

PolyfillWA: matrix(1.02, 0.35, 1.51e+15, 511086509457547, 0.50, 0) - disappears at start
BlinkTrans: matrix(1.02, 0.34, 1.51e+15, 505664579534488, 0.50, 0) - disappears at end
FirefTrans: matrix(1.04, 0.28, 4051570, 1084880, 0.50, 0) - disappears at start

Tested at time fraction 0.25:

translate(1px)
skew(60deg, 60deg)

PolyfillWA: matrix3d(0.19, -0.03, 0.15, 0, 0.10, 0.43, 0.31, 0, -0.31, -0.18, 0.35, 0, 0.75, 0, 0, 1) - performs some turns
BlinkTrans: matrix3d(0.20, -0.03, 0.16, 0, 0.10, 0.44, 0.31, 0, -0.31, -0.18, 0.36, 0, 0.75, 0, 0, 1) - no turns, snap at end
FirefTrans: matrix(0.22, -0.13, 0.13, 1.08, 0.75, 0) - turns, but different to the polyfill

translate(1px)
skew(60deg, 30deg)

PolyfillWA: matrix(1.03, 0.17, 0.00, 198022064019837, 0.75, 0) - disappears at start
BlinkTrans: matrix(1.03, 0.17, 0.00, 194991363867834, 0.75, 0) - disappears at end
FirefTrans: matrix(1.03, 0.13, 3104100, 405671, 0.75, 0) - disappears at start

I have a feeling that all of these are wrong in one way or another. The turning, snapping and vanishing are all incorrect, as far as I know.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions