CSS transform not updating with jQuery in all browsers

Question

I am attempting to translate an element on the input event of an html range input slider. But when I inspect the element, the inline styles created by jQuery aren't updating, but ONLY on the transform. I have applied some dummy styles just to make sure the css is being updated at all, and they are. Everything else updates exactly as expected.

It almost works one time if the item hasn't been transformed yet. But after a CSS transform is applied, it doesn't update. I've tested in Safari, Chrome, and Firefox with the same result.

Here's the method:

useInputValues : function(){
    $('input[id$="-x"]').on('input', function(e){
        var id = $(this).parents('li').attr('data-item-id'),
            item = $('.grid [data-item-id="' + id + '"]'),
            x = $(this).val(),
            y = $(item).css('transform').split(',')[5] || 0,
            trans = 'translate(' + x + 'px, ' + y + 'px)';
            console.log(x + ", " + y); // this shows the values are correct and updating properly       

        // translate the element. Why doesn't this update each time?
        $(item).css('transform', trans); 

        // update the position attribute
        $(item).attr('data-x', x); // this happily updates in real time as expected
    })
},

Further context: Working without jQuery

I am using the interact.js script so that the item can be dragged around for the same effect. The function it uses is very similar to mine, but it updates properly (without jQuery).

resizeMove : function(event){
    var target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0),
        y = (parseFloat(target.getAttribute('data-y')) || 0);
    target.style.width  = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    // Notice here: same general idea, but it's working
    target.style.webkitTransform = target.style.transform =
        'translate(' + x + 'px,' + y + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
    this.updateInputValues(target);
},

Any help is greatly appreciated.

Edit: Fiddle

See it doing the same thing here: https://jsfiddle.net/d5kdmp0v/1/

Answer 1

Getting the value of the transform style will return a matrix something like the following:

matrix(1, 0, 0, 1, 0, 0)

Because you are splitting this string on a comma, you still have a bracket in the string of the 6th element of the result, so the string is 0). That's an invalid CSS value.

If you remove that bracket before doing your split, you get what you're expecting:

y = $(item).css('transform').replace(')', '').split(',')[5] || 0

JSFiddle