Closed
Bug 883386
Opened 12 years ago
Closed 12 years ago
transition for transform doesn't work when using matrix to/from zero
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: jon.ronnenberg, Unassigned)
Details
Attachments
(1 file)
|
618 bytes,
text/html
|
Details |
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.
|
Reporter | |
Comment 1•12 years ago
|
||
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/
|
||
Updated•12 years ago
|
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
|
||
Updated•12 years ago
|
Attachment #762928 -
Attachment mime type: text/plain → text/html
|
|
||
Comment 2•12 years ago
|
||
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?
|
|
Reporter | |
Comment 3•12 years ago
|
||
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/
|
|
Reporter | |
Comment 4•12 years ago
|
||
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>
|
|
Reporter | |
Comment 5•12 years ago
|
||
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
|
|
Reporter | |
Comment 6•12 years ago
|
||
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: 12 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.)
|
||
Comment 8•8 years ago
|
||
Just ran into this... ☹️
You need to log in
before you can comment on or make changes to this bug.
Description
•