A O A O - 1 month ago 11
Javascript Question

Why doesn't `style.webKitTransition` and `style.webkitTransform` work anymore in Chrome?

These lines:

numberElement.style.webkitTransition=".1s ease-in-out";
numberElement.style.webkitTransform="scale(2.0)";


100% worked no more than a year ago. I pulled down the very stale repo to add another feature to it, but when I viewed the page, the scale wasn't working anymore. I changed my
HEAD
to be right at the commit where I am positive it was working, and the
scale
still doesn't work.

Checking out the elements at runtime, this is what I see

<span id="minute-number" style="transition: 0.1s ease-in-out; transform: scale(2.0);">TEST</span>


But visually, nothing is happening to the
TEST
text

Did something change with how I need to use
webkitTransition
or
webkitTransform
?

A O A O
Answer

Solved it (sort of) The elements that I was transforming were <span> elements, which apparently can't take transforms.

So I changed the css:

span {
  display: inline-block;
}

and the transforms were applied. The issue now is that inline-block modifies the dimensions of my elements, which I have asked about here: Why does applying `inline-block` force dimensions onto my span element?

Something must have changed in Chrome, though, because the transforms definitely worked on the <span> elements a year ago

Comments