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

Question

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?

Answer 1

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

Answer 2

I have this question too. In my situation, sometime I want to scale a element according to devicePixelRatio.So here is my code:

var ele = document.getElementById('my-id');
ele.style.transform = 'scale(xxx)';
ele.style.webkitTransform = 'scale(xxx)';

It didn't work.
So I console ele.style in terminal. As we known, it will console a CSSStyleDeclaration object. However, the property webkitTransform doesn't show in CSSStyleDeclaration object.
In fact, when you code ele.style.webkitTransform = xxxx which not work because of CSSStyleDeclaration object have no property webkitTransform.

I find the explanation from official document, CSS Declaration Blocks. Please attention parse a CSS declaration block step3, it looks like the lodash function _.extend({}, {...}).

I have another solution, like this:

ele.setAttribute('style', ele.style.cssText + '-webkit-transform:scale(1);')

Maybe it looks a little ugly, but it work. Hope it will help you.