CSS transitions not working for sibling selectors

RESOLVED INVALID

Status

()

RESOLVED INVALID
6 years ago
6 years ago

People

(Reporter: dominic.tobias, Unassigned)

Tracking

17 Branch
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

6 years ago
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

6 years ago
Could you attach a minimal testcase, please.
Flags: needinfo?(dominic.tobias)
(Reporter)

Comment 2

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

Try in Chrome vs FF
Flags: needinfo?(dominic.tobias)

Comment 3

6 years ago
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).
(Reporter)

Comment 4

6 years ago
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.
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 ;
(Reporter)

Comment 6

6 years ago
Ahhh, sorry & thanks for looking and solving I will close this now
(Reporter)

Updated

6 years ago
Status: UNCONFIRMED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.