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
?
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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.