Remove a -webkit-transform from an element via JavaScript

Question

I am trying to work around this bug: http://code.google.com/p/chromium/issues/detail?id=20574 thinking of performing the transform, and then afterwards removing it while positioning the element in its end position via JavaScript.

I tried

document.getElementById('popover').style.setProperty("-webkit-transform", "translate3d(0,0,0)")

and

document.getElementById('popover').style.setProperty("-webkit-transform", "none")

None seem to have any effect.

If I remove the transforms and position the elements manually the fixed element does behave as it should.

Here are the transforms themselves:

#popover.open {
    display: block;
    position: relative;
    -webkit-animation: openpopup 0.2s 1;
    -webkit-animation-fill-mode: forwards;
} 
#popover.closed {
    -webkit-animation: closepopup 0.2s 1;
    -webkit-animation-fill-mode: forwards;
} 
@-webkit-keyframes openpopup {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0%, 0);
    }
}
@-webkit-keyframes closepopup {
    from {
        -webkit-transform: translate3d(0, 0%, 0);
    }
    to {
        -webkit-transform: translate3d(0, 100%, 0);
    }
}

Neograph734 · Accepted Answer · 2013-02-06 16:56:24Z

2

Javascript had a different name for the css property you are trying to change. It's called WebkitTransform.

document.getElementById('popover').style.setProperty("WebkitTransform", "none"); Should work.

answered Feb 6, 2013 at 16:56

Neograph734

1,7642 gold badges18 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Damon Over a year ago

That didn't seem to have an effect. Returns 'undefined' when I run it, and nothing else appears to change. I would expect the element to return to where it would be before the transform?

Christian Over a year ago

For the record, you could as well have done this: document.getElementById('popover').style.WebkitTransform = "none";. Speaking of which, you can get those properties by inspecting document.getElementById('popover').style in your browser console (of course don't expect WebkitTransform to show up in Firefox's console).

Damon Over a year ago

that's weird.. it's tranform property is blank after the transform, but fixed elements are still fixed to the top of the transformed div instead of the window. I guess it goes deeper.

Collectives™ on Stack Overflow

Remove a -webkit-transform from an element via JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related