Applying a scaling transform in the current transform element

Question

I use stellar.js and iscroll-probe.js (part of iScroll 5) to handle scrolling on a mobile device in an HTML5 application built using Ionic (using Cordoba).

My problem is that I tell stellarJs to scroll through transforms

scrollProperty: 'transform',

Now that the page is at the top and the user is dragging it, I apply the css scale to the element so that it grows.

document.getElementById('imageHolder').style["-webkit-transform"] = "matrix(" + scaleVar + ", 0, 0, " + scaleVar + ", 0, 0)";

It scales it, but there is flicker. This is because Stellar.js is constantly overwriting the element transformation with

translate3d(0px, -5px, 0px) 

(If the page is 5 pixels down)

If I console my log conversion value, I get something like this:

matrix(1.02, 0, 0, 1.02, 0, 0) 
translate3d(0px, -1px, 0px) 
translate3d(0px, -0.5px, 0px) 
matrix(1.00666666666667, 0, 0, 1.00666666666667, 0, 0) 
translate3d(0px, 0px, 0px) 

Any idea how I can overcome this? can i add conversions?

I tried

"matrix(" + cssVar + ", 0, 0, " + cssVar + ", 0, " + this.y / 2 + ")";

, , .