Closed Bug 883386 Opened 11 years ago Closed 11 years ago

transition for transform doesn't work when using matrix to/from zero

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Version:
22 Branch
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: jon.ronnenberg, Unassigned)

Details

Attachments

(1 file)

transform.htm
618 bytes, text/html
Details
Attached file transform.htm — 
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:22.0) Gecko/20100101 Firefox/22.0 (Beta/Release)
Build ID: 20130612084701

Steps to reproduce:

Hide an element with (CSS): transform: matrix(1, 0, 0, 0, 0, 0);
Apply transition:transform <seconds>
Show element with: transform: matrix(1, 0, 0, 1, 0, 0);


Actual results:

Just as with display:none/block, the element pops up/disappear without any animation.


Expected results:

The element should be animated from zero to calculated height.

Note, that hiding an element with transform: matrix(1, 0, 0, 0.0001, 0, 0) does work, albeit it leaves a single 1px artifact where the element is positioned.

Note II, webkit, with -web-kit prefixes handles this use-case without hiccups.
Strike note II. For some reason, animating from matrix(1,0,0,0,0,0) works in Safari here; http://www.pragmaticcoach.dk (navigation menu with break point at < 649px) but I can not reproduce it in a simple test case: http://jsfiddle.net/PhyQc/2/
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
Attachment #762928 - Attachment mime type: text/plain → text/html
From the spec at http://dev.w3.org/csswg/css-transforms/#matrix-interpolation :

  If one of the matrices for interpolation is non-invertible, the used animation function
  must fallback to a discrete animation according to the rules of the respective animation
  specification. 

because the spec for interpolating between two matrices only works for non-singular transforms.  As far as I can tell, we're following the spec here, no?
Hmm, it seems that you're right. As far as I can gather from the Decomposing the Matrix pseudocode (http://www.w3.org/TR/css3-transforms/#matrix-decomposing).

But that leaves web authors with the undesirable alternative, to set a max-height that is guaranteed to be higher than the element we want to show and in some circumstances web authors revert to javascript animations on that basis: http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto#comment-23872193

I'll mention this on the www-style mailing list and refer to this report.

max-height test case: http://jsfiddle.net/dotnetCarpenter/PhyQc/5/
Comment on attachment 762928 [details]
transform.htm

<!doctype html>
<html>
<meta charset="utf-8"/>
<title>Mozilla transform bug</title>
  <style>
    ul{
      transform: matrix(1, 0, 0, 0, 0, 0);
      transform-origin:top;
      transition:transform 0.26s ease-out;
    }
    section ul {
      transform: matrix(1, 0, 0, 0.0001, 0, 0);
    }
    p:hover ~ ul{
      transform: matrix(1, 0, 0, 1, 0, 0);
    }
  </style>
</head>
<body>
  <p>Hover here (from matrix(1, 0, 0, 0, 0, 0))</p>
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
  <section>
    <p>Hover here (from matrix(1, 0, 0, 0.0001, 0, 0))</p>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
  </section>
</body>
</html>
Sorry about the last comment. I thought I could amend to the test-case.
I've posted to the www-style mailing list at w3c: http://lists.w3.org/Archives/Public/www-style/2013Jun/0481.html
It seems that Firefox is following specification. Even though it's inconvenient, it doesn't seem that there is much to do about it at the moment[1]. The "work-around" is to use scaleY[2][3].

I suggest the RESOLUTION is set to WONTFIX.

[1] http://lists.w3.org/Archives/Public/www-style/2013Jun/0483.html
[2] http://lists.w3.org/Archives/Public/www-style/2013Jun/0482.html 
[3] http://jsfiddle.net/dotnetCarpenter/PhyQc/9/
Status: UNCONFIRMED → RESOLVED
Closed: 11 years ago
Resolution: --- → INVALID
(And note the good advice on the list that you're better off animating the scale(), scaleX(), or scaleY() to/from zero, and thus picking up the interpolation rules for particular transform functions rather than the rules for matrix.)
Just ran into this... ☹️
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: