Closed
Bug 1011153
Opened 10 years ago
Closed 10 years ago
CSS transition does not start when a pseudo selector creates generated content that precedes the target element to be transitioned
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 625289
People
(Reporter: geuis.teses, Unassigned)
References
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36 Steps to reproduce: When an element has a transition assigned to a property, that transition fails to start if it is triggered by a pseudo class (:hover, :active, etc) when another selector using the same pseudo class creates generated content as a preceding sibling to the element. Live example: http://jsfiddle.net/NVfj2/ Test case (copied from jsfiddle): HTML <div> <div>This will take 1 second to animate top to 40px then back.</div> </div> <div> <div>This will jump to top: 40px immediately then take 1 second to animate top to 0. div:last-child has no effect on this bug.</div> </div> CSS div { width: 300px; height: 100px; outline: 1px solid #cc0000; margin-bottom: 10px; } div > div { position: relative; top: 0; height: 20px; outline: 1px solid #000; -webkit-transition: top 1s; transition: top 1s; } div:hover > div { top: 40px; } div:last-child:hover::before { content: ''; } Actual results: In the sample code (http://jsfiddle.net/NVfj2/) hovering over the first example demonstrates that the child element's top property should immediately transition over 1 second to 40px. Upon the end of :hover, the child element animates over 1 second back to 0. In the second example that demonstrates the issue, when :hover::before creates generated content that precedes the child element, the initial transition from 0 to 40px does not occur. The child element's top property immediately changes with no transition in between. Upon removing hover, the top property correctly transitions to the top: 0px state. Expected results: The child element should transition over 1 second both when hover begins and when hover ends.
Updated•10 years ago
|
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
lower animation in http://jsfiddle.net/NVfj2/ is fixed in Firefox 34
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
•