Closed
Bug 800927
Opened 12 years ago
Closed 10 years ago
CSS transitions do not run when css change also involves a change in 'position'
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 625289
People
(Reporter: liam.prescott, Unassigned)
References
Details
Attachments
(1 file)
1.03 KB,
text/html
|
Details |
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4 Steps to reproduce: ================= Firefox version 16.0.1 ================= CSS Transitions do not run when the change also involves a change in the css 'position' property e.g. from 'position:relative' to 'position:absolute'. It appears that if the element is moved in and out of the document 'flow' then any CSS transitions associated with the change e.g. animating 'opacity' or 'width' that should occur as this happens are not run. Instead the DOM element jumps straight to the final state. Please see example extract below. ---------------------------------------------------------------------- This is a simplified example. To run either: 1. Add and remove the class 'abc-change' to the element manually in firebug or 2. Create a simple JS function to do this ---------------------------------------------------------------------- /* HTML */ <!-- START STATE --> <div class="parent"> <div class="abc"> <p>Some content</p> </div> </div> <!-- CHANGED STATE --> <div class="parent"> <div class="abc abc-change"> <p>Some content</p> </div> </div> /* CSS */ .parent { position:relative; } .abc { position:relative; top:0; left:0; opacity:0; -webkit-transition-property:opacity; -webkit-transition-duration:0.8s; -webkit-transition-timing-function:ease; -webkit-transition-delay:0s; -moz-transition-property:opacity; -moz-transition-duration:0.8s; -moz-transition-timing-function:ease; -moz-transition-delay:0s; -o-transition-property:opacity; -o-transition-duration:0.8s; -o-transition-timing-function:ease; -o-transition-delay:0s; transition-property:opacity; transition-duration:0.8s; transition-timing-function:ease; transition-delay:0s; } .abc-change { position:fixed; /*OR absolute*/ /*###### Removing this line fixes issues and transition run ######*/ opacity:1; } Actual results: CSS transition did not run, instead properties 'snap' to final state. (opacity in the example) Expected results: CSS transition should have run (opacity in the example). The expected behavior can be seen in Google Chrome and other browsers where all transitions run when the css 'position' of an element is changed
Updated•12 years ago
|
Component: Untriaged → Style System (CSS)
Product: Firefox → Core
Comment 1•11 years ago
|
||
I can confirm this bug. We're experiencing it with some dev work on twitter.com.
This bug is absolutely ridiculous. We have to implement a requireAnimationFrame animation for each and every transition that modifies positions just to make up for FF.
Testcase requires work to reconstruct; presuming this is a duplicate, and now fixed.
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•