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)

x86_64
Windows 7
defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 625289

People

(Reporter: liam.prescott, Unassigned)

References

Details

Attachments

(1 file)

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
Component: Untriaged → Style System (CSS)
Product: Firefox → Core
Depends on: 625289
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.