Issue with "transform: translate(0%);"

[Vasyl-Kobyletskiy]

When you try to get transform matrix from "transform: translate(0%);" you will get not valid matrix [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, NaN, NaN, NaN, NaN]. This issue is caused by not handling single parametr in translate function. To fix this change code

  case 'translate':
  case 'translate3d':
    matrix = createMatrix();
    value = value.split(',').map(parseFloat);

    if(value.length === 2) {
      value.push(0);
    }

    mat4Translate(matrix, matrix, value);
   break;

into

  case 'translate':
  case 'translate3d':
    matrix = createMatrix();
    value = value.split(',').map(parseFloat);

    if(value.length === 1){
      value.push(0);//add default Y translate value
    }

    if(value.length === 2) {
      value.push(0);//add default Z translate value
    }

    mat4Translate(matrix, matrix, value);
  break;

[mikkoh]

Unfortunately I did not have % translations in mind when writing this module.

I think in order to implement this feature you'd require to watch the dom element and get the width and height of the element through offsetWidth and offsetHeight which in general are not performant. (accessing these variables causes an entire new render of the page)

[Vasyl-Kobyletskiy]

Yes, you are absolutely right, but issue is not in percentage. Issue is that if I will pass translate with one parametr it won't be normally handled (e.g. "transform: translate(5px);"). So we need to add not only Z default value, which is done in this code line

if(value.length === 2) { value.push(0); }

but Y default value too, if only X is passed.

This code structure

value = value.split(',').map(parseFloat);

if(value.length === 2) {
  value.push(0);
}

should be a bit modified into

value = value.split(',').map(parseFloat);

if(value.length === 1){
  value.push(0);//add default Y translate value
}

if(value.length === 2) {
  value.push(0);//add default Z translate value
}