Bug 112274 – REGRESSION: airbnb.com logo does not bounce as it should

• Status: RESOLVED
• Resolution: INVALID
• Component: CSS

[Alexis Menard (darktears)]

Go to http://airbnb.com
Hover the logo on the top left corner
There should be some kind of bouncing effect


Safari stable still bounce the logo but Chrome 25 and trunk does not bounce the logo anymore.

I nailed it down and though it was an animation regression but it is not.

http://jsfiddle.net/darktears/zsntM/9/ is a reduced test case.

What happens is that the webkit-transform values in the keyframes are buggy

According to http://www.w3.org/TR/css3-transforms/#transform-functions

rotate3d(<number>, <number>, <number>, <angle>)
specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters. A direction vector that cannot be normalized, such as [0,0,0], will cause the rotation to not be applied.  

and the website construct transforms like this : -webkit-transform: rotate3d(0,0,0,0deg) which seems to be invalid.

It was working before, so it is a regression but the code was buggy.

Thoughts?

[Alexis Menard (darktears)]

(In reply to comment #0)
> Go to http://airbnb.com
> Hover the logo on the top left corner
> There should be some kind of bouncing effect
> 
> 
> Safari stable still bounce the logo but Chrome 25 and trunk does not bounce the logo anymore.
> 
> I nailed it down and though it was an animation regression but it is not.
> 
> http://jsfiddle.net/darktears/zsntM/9/ is a reduced test case.
> 
> What happens is that the webkit-transform values in the keyframes are buggy
> 
> According to http://www.w3.org/TR/css3-transforms/#transform-functions
> 
> rotate3d(<number>, <number>, <number>, <angle>)
> specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters. A direction vector that cannot be normalized, such as [0,0,0], will cause the rotation to not be applied.  
> 
> and the website construct transforms like this : -webkit-transform: rotate3d(0,0,0,0deg) which seems to be invalid.
> 
> It was working before, so it is a regression but the code was buggy.
> 
> Thoughts?

The code should be -webkit-transform: rotate3d(1,1,1,0deg)

[Simon Fraser (smfr)]

Seems like a content issue.

[Allan Sandfeld Jensen]

Could this be a conflict between old prefix behavior, and the standardization cleanup done when unprefixing it recently? I seem to recall there was few other quirks that had to be reintroduced to the prefixed version. Then again, not sure this is important enough for a quirk.

[Alexis Menard (darktears)]

(In reply to comment #3)
> Could this be a conflict between old prefix behavior, and the standardization cleanup done when unprefixing it recently? I seem to recall there was few other quirks that had to be reintroduced to the prefixed version. Then again, not sure this is important enough for a quirk.

I think the content is proper buggy 0,0,0 does not make any sense.