1024254 - Animating an icon inside a span block won't work but works within a div block. On Chrome, works in a span and a div block.

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[bsleater]

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

Steps to reproduce:

http://jsfiddle.net/pjQP7/20/

Trying to animate an icon, with the animation css placed on a span block.


Actual results:

The icon wouldn't animate unless you either change the <span> to a <div>, or you place a display: inline-block; on the span class. In chrome, the icon will animate without having to change the display. Wondering if this is a bug or intentional. I rarely see a difference like this between the two browsers.


Expected results:

The results I see in Chrome. The icon will animate within the span block.

Comment 1

[:Gijs (he/him)]

So the issue is that transforms don't apply to the span and therefore nothing animates (see e.g. the much simpler testcase here: http://jsbin.com/jeliri/1/edit ). As far as I can tell, that is per spec ( http://dev.w3.org/csswg/css-transforms/#transformable-element, see also http://www.w3.org/TR/CSS2/visuren.html#x13 ) this is correct.

Comment 2

[:Gijs (he/him)]

Aryeh, can you comment on this? I'm a little surprised that Chrome would do something else here. Maybe I'm just grossly misreading the spec. :-)

Comment 3

[:Gijs (he/him)]

(Chrome behaves the same on my simpler testcase, which means there's something else which is messing with the original testcase that causes it to do something different from what we're doing. Not sure what.)

Comment 4

[Boris Zbarsky [:bzbarsky]]

This looks like a Chrome bug to me where it applies transforms in keyframes (which are presumably done via a different mechanism from normal transforms) to inline elements.  Note that this is NOT a problem in Safari, so it's a pure Chrome issue.

I filed https://code.google.com/p/chromium/issues/detail?id=383931