New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 739723 link

Starred by 1 user
Status: Fixed
Owner:
█ vollick@chromium.org
Last visit > 30 days ago
Closed: Jul 2017
Cc:
chrishtr@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

3D transforms don't transition correctly in certain conditions

Project Member Reported by komoroske@chromium.org, Jul 6 2017 
Chrome Version: 61.0.3146.0 (Official Build) canary (64-bit)
OS: Mac OS X 10.12.5

What steps will reproduce the problem?
(1) Have a page that has an element with a 3D transform inside of an element with a 3D transform, both of which have a transition set
(2) In the code that sets the inner transform, either append or omit a term of "rotateY(180deg)" at the end of a transform string with other transforms

What is the expected result?
The two transforms animate smoothly over the range

What happens instead?
The outer transform happens correctly; the inner transform behaves like it has a step-end timing function.

If instead of omitting the "rotateY(180deg)" I always include it (e.g. "transform += ' ' + (shouldFlip ? 'rotateY(180deg)' : 'rotateY(0deg)')" it works correctly, even though the two ultimate transform matrices SHOULD be equivalent as is.

I showed the breakage condition to chrishtr yesterday in person; the repro is in a project that I have locally on my machine but haven't yet published anywhere. Let me know if you can't immediately figure out the repro and I'll see if I can get it serving somewhere for testing.

Please use labels and text to provide additional information.

Just did a bisect, with this result: https://chromium.googlesource.com/chromium/src/+log/2108fde0a1bae2c02673d8fbff107019a1569c65..0ad840645e519cfc4ebb9af29ae479e29d296401

This change looks suspicious: https://chromium.googlesource.com/chromium/src/+/4d40fcb91bc157f095b8c0a01302a6c6e2d28817

Comment 1 by vollick@chromium.org, Jul 6 2017

Status: Started (was: Untriaged)
Thanks for filing!

This was indeed the result of the change you mention. It requires a bit of explanation. First, here's a repro: https://jsfiddle.net/1397cjho/5/.

What's happening is that we're trying to interpolate between lists of transforms that do not align. When this happens we collapse the list of transform operations at each keyframe to a matrix, then decompose the matrix into it's constituent translation, scale, rotation, etc. then interpolate those componenents. This matrix interpolation is a last resort and rarely produces the result that you want. In this case, the rotation of 180 is inherently ambiguous (do you go forward or backward). The spec gives a routine for quaternion interpolation (https://www.w3.org/TR/css-transforms-1/#interpolation-of-decomposed-3d-matrix-values). This does not handle the 180 degree case differently.

It sounds like the right approach is to, unlike I did in my CL, pick an arbitrary direction to rotate and do that.
Project Member

Comment 2 by bugdroid1@chromium.org, Jul 6 2017 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/799b4a3caeaaa5b99fea35d3ce3a96f7553b8f56

commit 799b4a3caeaaa5b99fea35d3ce3a96f7553b8f56
Author: vollick <vollick@chromium.org>
Date: Thu Jul 06 18:22:11 2017

Fix matrix interpolation between rotations of 180 degrees

In a previous cl (https://chromium-review.googlesource.com/526993), I
intentionally avoided interpolating decomposed rotation components
if they differed by 180 degrees (because this was ambiguous). This does
not match the spec (https://www.w3.org/TR/css-transforms-1/#interpolation-of-decomposed-3d-matrix-values)

This change reverts us to the previous rotation behavior.

BUG= 739723 

Review-Url: https://codereview.chromium.org/2971903005
Cr-Commit-Position: refs/heads/master@{#484678}

[modify] https://crrev.com/799b4a3caeaaa5b99fea35d3ce3a96f7553b8f56/ui/gfx/geometry/quaternion.cc
[modify] https://crrev.com/799b4a3caeaaa5b99fea35d3ce3a96f7553b8f56/ui/gfx/geometry/quaternion_unittest.cc
[modify] https://crrev.com/799b4a3caeaaa5b99fea35d3ce3a96f7553b8f56/ui/gfx/transform_unittest.cc

Comment 3 by vollick@chromium.org, Jul 6 2017

Status: Fixed (was: Started)
►

Sign in to add a comment