820376 - CSS transitions not working for sibling selectors

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[dominic]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.95 Safari/537.11

Steps to reproduce:

.transition(@duration:0.2s, @ease:ease-out, @property:all) {
  -webkit-transition: @property @duration @ease;
  -moz-transition: @property @duration @ease;
  -o-transition: @property @duration @ease;
  -ms-transition: @property @duration @ease;
  transition: @property @duration @ease;
}

a.link + img {top:-3px; .transition(500ms, ease-in-out, top);}


Actual results:

There is no transition animation.

(Also putting it directly on the image outside of the hover state doesn't work)

Tested to works in Chrome, but also doesn't work in Opera (with the relevant vendor prefixes of course)


Expected results:

I should have seen the top value animated from top:0 to top:-3px

Comment 1

[Loic]

Could you attach a minimal testcase, please.

Comment 2

[dominic]

Here is a minimal example: http://jsfiddle.net/QRGPm/1/

Try in Chrome vs FF

Comment 3

[Loic]

I tried in IE9, FF17 and FF8 (old version), same behaviour. The red paragraph goes downwards then returns to its inial place when the mouse is hovering the link (href).

Comment 4

[dominic]

Yep, but it is using the transition css, of 500ms, so it is supposed to animate downwards for half a second. Sibling selector works in FF. But applying animations to them doesn't seem to work.

If you test in Chrome you will see the red button moves downwards in an animation.

Comment 5

[Robert Longson [:longsonr]]

If you add an initial top value e.g.

a {
    position:relative; display:block; background-color:red; width:50px height:150px; top: 0px;
}

It works. Note that the width and height properties above are invalid as they are in the original fiddle since they're not separated by a ;

Comment 6

[dominic]

Ahhh, sorry & thanks for looking and solving I will close this now