Search code examples
javascriptwebkitwebkit-transformwebkit-transition

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?

Solution

  • 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