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)

29 Branch
x86
macOS
defect
Not set
normal

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.
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
This is a special case of bug 625289.
Depends on: 625289
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.