Title: css translate doesn't work with Math functions
Tags: javascript;jquery
Question: I am trying to translate 4 rectangular boxes to with sin/cos function. But it doesn't work in chrome/firefox. However in IE, it works. Given below is the code and the you can see the demo in jsfiddle.
(function() {
var circle = $(".circle"),
circleChild = $(".circle-child", circle),
circleChildLength = circleChild.find("li").length,
isDragged = false,
speed = 5,
angles = [],
initialDistance = 0,
totalDistance = 150;
function moveChildCircles() {
initialDistance += speed;
if(initialDistance &gt;= totalDistance  || initialDistance <= 0) {
speed = -speed;
isDragged = !isDragged;
}
/* This doesn't work, it works only when I set either translateX or translateY     (not both). */
circleChild.find("li").each(function(i) {
$(this).css("transform", "translate(" + initialDistance*Math.cos(angles[i]) + "px," + initialDistance*Math.sin(angles[i]) + "px)");
});
circle.click(function() {
var addAngle = Math.PI*2/circleChildLength;
for(var i = 0; i < circleChildLength; i++) {
angles[i] = i*addAngle;
}
isDragged = !isDragged;
});
(function animate() {
requestAnimationFrame(animate);
if(isDragged) {
moveChildCircles();
}
}());
As you can see this works only for either one of translateX/translateY. When I debug this,
animate() method update only first li value. Why?

Here is the accepted answer: Looks like the CSS change wasn't working due to the math evaluating to fractional pixels. Try using Math.round on your pixel calculation:
$(this).css("transform", "translate(" + Math.round(initialDistance*Math.cos(angles[i])) + "px," + Math.round(initialDistance*Math.sin(angles[i])) + "px)");
Demonstration
Comment for this answer: I came up with the same answer, but used Math.floor().
Comment for this answer: We should probably split the difference and use `Math.round()`.
Comment for this answer: oh man, you are awesome. I do this in html5 canvas and it works there. But when I done using DOM, browser simply ignore it. It means css translate doesn't support fractions.
Comment for this answer: And by the way, I think we can use toFixed() also


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:10/17/13', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery>', 'Title': "css translate doesn't work with Math functions", 'ViewCount': 467, 'id': 19433412, 'user_AboutMe': '<p>Working on inboxup.io, full stack developer (nodejs, react)</p>\n', 'user_AccountId': 2389614.0, 'user_DisplayName': 'Ashish Rawat', 'user_Reputation': 3303.0, 'user_Views': 191.0, 'user_id': 2092405.0}}