Quiero aplicar la transform: translate3D(...) a un elemento con css() de jQuery, pero cuando uso un porcentaje para la traducción, corta la precisión a 3 decimales.

Ejemplo

Digamos que tengo el siguiente elemento.

 <div class="sliderContent"></div>

Y quiero aplicar una traducción con un porcentaje específico basado en la cantidad de elementos visibles ( 6 ), lo que debería conducir a una compensación de -116.66666666666667% (menos debido a la traducción a la izquierda).

 let sliderContent = $('.sliderContent'); let visibleSliderItems = 6; let transformOffset = 100 + (100 / visibleSliderItems); let translate3D = 'translate3d(-' + transformOffset + '%, 0px, 0px)'; console.log(translate3D); // translate3d(-116.66666666666667%, 0px, 0px) sliderContent.css({ '-webkit-transform': translate3D, '-ms-transform': translate3D, 'transform': translate3D, });

Esto mostrará lo siguiente al inspeccionar el elemento

 <div class="sliderContent" style="transform: translate3d(-116.667%, 0px, 0px);"></div>

Resultado esperado/deseado

 <div class="sliderContent" style="-webkit-transform: translate3d(-116.66666666666667%, 0px, 0px);-ms-transform: translate3d(-116.66666666666667%, 0px, 0px);transform: translate3d(-116.66666666666667%, 0px, 0px)"></div>

Probé diferentes formas de aplicar el estilo, con jQuery y JS simple, tratando de emitir o agregar toFixed(n) , pero aún terminaría con 3 decimales y solo mostraría la transform sin las variantes -webkit o -moz .

Mi prioridad es mantener la precisión porcentual.

Editar

Con respecto a los estilos -webkit / -ms según los documentos de jQuery:

A partir de jQuery 1.8, el configurador .css() se encargará automáticamente de prefijar el nombre de la propiedad. Por ejemplo, tomar .css( "user-select", "none") en Chrome/Safari lo configurará como -webkit-user -select, Firefox usará -moz-user-select e IE10 usará -ms-user-select.