I want to apply inline styling transform: translate3D(...) to an element with jQuery's css(), but when using a percentage for the translation it cuts off the precision to 3 decimals.

Example

Let's say I have the following element.

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

And I want to apply a translation with a specific percentage based on amount of visible elements (6), which should lead to an offset of -116.66666666666667% (minus due to translation to the left).

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,
});

This will show the following when inspecting the element

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

Expected/desired result

<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>

I've tried different ways of applying the style, with jQuery and plain JS, trying to cast or add toFixed(n), but it will still end up with 3 decimals and only showing the transform without the -webkit or -moz variants.

My priority is to keep percentage precision.

Edit

Regarding -webkit / -ms styles according to jQuery docs:

As of jQuery 1.8, the .css() setter will automatically take care of prefixing the property name.For example, take .css( "user-select", "none" ) in Chrome/Safari will set it as -webkit-user-select, Firefox will use -moz-user-select, and IE10 will use -ms-user-select.