jQuery returns different top and left values depending on the browser

Question

I have created an animation with jQuery, which is attached to this question. The problem is that the animation looks different as expected in the following browsers (see pictures below):

• Firefox 49.0
• Safari 10.0

I also tried some other browsers, where the animation looks like as intended (see picture below):

• Chrome Version 53.0.2785.143
• Opera 40.0.0.230817323

It seems that jQuery delivers slightly different positions for the elements (M1,M2,..). If you take a look at the js code from the snippet, there I compute the waypoints from the starting point to e.g. the M1 box. This information is stored in the pathsFromStartToMachines array. If I log the computed waypoints for example to the M1 box I will get slightly different results depending on the browser.

• Firefox -[0] left: 140px top: 143px -[1] left: 225px top: 143px
• Chrome -[0] left: 140px top: 143px -[1] left: 228px top: 143px

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.machineWidth = Number($('.machine').css('width').replace(/px/, ""));
  $scope.machineHeight = Number($('.machine').css('height').replace(/px/, ""));
  //regex transform string like '343px solid rgb(47,79,79)' into '343'
  $scope.machineBorder = Number($('.machine').css('border').replace(/px\s\w+\s\w+\S\d+\S\s*\d+\S\s*\d+\S/, ""));
  $scope.machineTotalHeight = Number($scope.machineHeight + 2 * $scope.machineBorder);
  $scope.machineTotalWidth = Number($scope.machineWidth + 2 * $scope.machineBorder);

  $scope.middleLineWidth = Number($('#middleLine').css("width").replace(/px/, ""));
  $scope.middleLineTop = Number($('#middleLine').css("top").replace(/px/, ""));
  $scope.middleLineLeft = Number($('#middleLine').css("left").replace(/px/, ""));

  $scope.thicknessHorizontalLine = Number($('.horizontal').css('border-bottom').replace(/px\s\w+\s\w+\S\d+\S\s*\d+\S\s*\d+\S/, ""));

  $scope.palletHeight = 10;
  $scope.palletWidth = 30;

  $scope.startPositionMiddleLine = {
    top: $scope.middleLineTop - $scope.palletHeight,
    left: $scope.middleLineLeft
  };

  $scope.machines = [];
  $('.machine').each(function(index) {
    var id = $(this).attr("id");
    var top = Number($(this).css("top").replace(/px/, ""));
    var left = Number($(this).css("left").replace(/px/, ""));
    $scope.machines.push({
      id: id,
      top: top,
      left: left
    });
  });

  //calculate paths from start to each machine
  var pathsFromStartToMachines = [];
  for (var i = 0; i < $scope.machines.length; i++) {
    var id = $scope.machines[i].id;
    var top = undefined;
    if ($("#" + id).hasClass('first-machine-line')) {
      top = $scope.machines[i].top + $scope.machineTotalHeight;
    } else {
      top = $scope.machines[i].top - $scope.palletHeight;
    }
    var left = $scope.machines[i].left + $scope.machineTotalWidth / 2;


    var waypoints = [];
    waypoints.push($scope.startPositionMiddleLine); //starting point middleLine
    waypoints.push({
      top: $scope.middleLineTop - $scope.palletHeight,
      left: left - $scope.palletWidth / 2
    }); //waypoint on middleLine
    waypoints.push({
      top: top,
      left: left - $scope.palletWidth / 2
    });

    var path = {
      id: id,
      waypoints: waypoints
    };
    pathsFromStartToMachines.push(path)
  }

  $scope.pallets = [];

  $scope.createNewPallet = function(type, position) {
    //generate random unique id
    var id = "pallet" + generateId();
    //check if id is not already in use
    while ($scope.pallets.indexOf(id) !== -1) {
      id = "pallet" + generateId();
    }
    //add pallet to DOM
    $('#mainContainer').append('<div class="pallet" id="' + id + '" style="display:none; top:' + position.top + 'px; left:' + position.left + 'px;"></div>');
    $scope.pallets.push(id);

    //pallet fade in
    $('#' + id).fadeIn("50000");
    return id;
  };

  $scope.movePallet = function(palletId, destinationId) {
    //query path to machine. Notice that $.grep returns an array
    var path = $.grep(pathsFromStartToMachines, function(obj) {
      return obj.id === destinationId;
    });
    for (var i = 0; i < path[0].waypoints.length; i++) {
      var waypoint = path[0].waypoints[i];
      $('#' + palletId).animate({
        left: waypoint.left + 'px',
        top: waypoint.top + 'px'
      }, "slow"); //instead of slow you can use e.g. {duration: 2000}
    }
    $('#' + palletId).fadeOut("slow", function() {
      $('#' + palletId).remove();
    });
  };

  $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m1");
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m5");
  }, 1500);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m2");
  }, 3000);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m4");
  }, 4500);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m3");
  }, 6000);


  function generateId() {
    //generates a random number between 1 and 10000
    return Math.floor((Math.random() * 10000) + 1);
  }
});

#mainContainer > div {
  position: absolute;
}
#mainContainer {
  position: relative;
  width: 700px;
  height: 400px;
  border: 3px solid slategrey;
  background-color: whitesmoke;
}
div.machine {
  width: 60px;
  height: 60px;
  border: 3px solid darkslategray;
  border-radius: 12px;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  background-color: lightslategray;
  color: whitesmoke;
  font-family: Verdana, Helvetica, sans-serif;
}
.first-machine-line {
  top: 10%;
}
.second-machine-line {
  top: 50%;
}
#m1 {
  left: 30%;
}
#m2 {
  left: 50%;
}
#m3 {
  left: 70%;
}
#m4 {
  left: 30%;
}
#m5 {
  left: 50%;
}
.line {
  border: 0;
  background: lightgrey;
}
.horizontal {
  border-bottom: 2px dashed dimgrey;
}
.vertical {
  border-left: 2px dashed dimgrey;
}
#middleLine {
  width: 70%;
  top: calc((50% - 10% - 66px) / 2 + 10% + 66px);
  left: 20%;
}
.vertical-line {
  height: calc((50% - 10% - 66px) / 2);
}
.vertical-line-first-machine-line {
  top: calc(10% + 66px);
}
.vertical-line-second-machine-line {
  top: calc(10% + 66px + (50% - 10% - 66px) / 2);
}
#M1toMiddle {
  left: calc(30% + 66px / 2);
}
#M2toMiddle {
  left: calc(50% + 66px / 2);
}
#M3toMiddle {
  left: calc(70% + 66px / 2);
}
#M4toMiddle {
  left: calc(30% + 66px / 2);
}
#M5toMiddle {
  left: calc(50% + 66px / 2);
}
.pallet {
  width: 30px;
  height: 10px;
  background-color: dimgrey;
  border-radius: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <div id="mainContainer" class="relative">

    <div class="machine first-machine-line" id="m1">M1</div>
    <div class="machine first-machine-line" id="m2">M2</div>
    <div class="machine first-machine-line" id="m3">M3</div>

    <div class="machine second-machine-line" id="m4">M4</div>
    <div class="machine second-machine-line" id="m5">M5</div>

    <div class="line horizontal" id="middleLine"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M1toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M2toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M3toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-second-machine-line" id="M4toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-second-machine-line" id="M5toMiddle"></div>

  </div>
</body>

UPDATE: Here is a screenshot of the provided solution from @ConnorsFan in safari (version 10.0)

Answer 1

The border width of the "machine" div is not reported correctly in Firefox. You should replace:

$scope.machineBorder = Number($('.machine').css('border').replace(/px\s\w+\s\w+\S\d+\S\s*\d+\S\s*\d+\S/, ""));

with

$scope.machineBorder = Number($('.machine').css('borderTopWidth').replace(/px/, ""));

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.machineWidth = Number($('.machine').css('width').replace(/px/, ""));
  $scope.machineHeight = Number($('.machine').css('height').replace(/px/, ""));
  //regex transform string like '343px solid rgb(47,79,79)' into '343'
  $scope.machineBorder = Number($('.machine').css('borderTopWidth').replace(/px/, ""));
  $scope.machineTotalHeight = Number($scope.machineHeight + 2 * $scope.machineBorder);
  $scope.machineTotalWidth = Number($scope.machineWidth + 2 * $scope.machineBorder);

  console.log($scope.machineBorder);
 
  $scope.middleLineWidth = Number($('#middleLine').css("width").replace(/px/, ""));
  $scope.middleLineTop = Number($('#middleLine').css("top").replace(/px/, ""));
  $scope.middleLineLeft = Number($('#middleLine').css("left").replace(/px/, ""));

  $scope.thicknessHorizontalLine = Number($('.horizontal').css('border-bottom').replace(/px\s\w+\s\w+\S\d+\S\s*\d+\S\s*\d+\S/, ""));

  $scope.palletHeight = 10;
  $scope.palletWidth = 30;

  $scope.startPositionMiddleLine = {
    top: $scope.middleLineTop - $scope.palletHeight,
    left: $scope.middleLineLeft
  };

  $scope.machines = [];
  $('.machine').each(function(index) {
    var id = $(this).attr("id");
    var top = Number($(this).css("top").replace(/px/, ""));
    var left = Number($(this).css("left").replace(/px/, ""));
    $scope.machines.push({
      id: id,
      top: top,
      left: left
    });
  });

  //calculate paths from start to each machine
  var pathsFromStartToMachines = [];
  for (var i = 0; i < $scope.machines.length; i++) {
    var id = $scope.machines[i].id;
    var top = undefined;
    if ($("#" + id).hasClass('first-machine-line')) {
      top = $scope.machines[i].top + $scope.machineTotalHeight;
    } else {
      top = $scope.machines[i].top - $scope.palletHeight;
    }
    var left = $scope.machines[i].left + $scope.machineTotalWidth / 2;


    var waypoints = [];
    waypoints.push($scope.startPositionMiddleLine); //starting point middleLine
    waypoints.push({
      top: $scope.middleLineTop - $scope.palletHeight,
      left: left - $scope.palletWidth / 2
    }); //waypoint on middleLine
    waypoints.push({
      top: top,
      left: left - $scope.palletWidth / 2
    });

    var path = {
      id: id,
      waypoints: waypoints
    };
    pathsFromStartToMachines.push(path)
  }

  $scope.pallets = [];

  $scope.createNewPallet = function(type, position) {
    //generate random unique id
    var id = "pallet" + generateId();
    //check if id is not already in use
    while ($scope.pallets.indexOf(id) !== -1) {
      id = "pallet" + generateId();
    }
    //add pallet to DOM
    $('#mainContainer').append('<div class="pallet" id="' + id + '" style="display:none; top:' + position.top + 'px; left:' + position.left + 'px;"></div>');
    $scope.pallets.push(id);

    //pallet fade in
    $('#' + id).fadeIn("50000");
    return id;
  };

  $scope.movePallet = function(palletId, destinationId) {
    //query path to machine. Notice that $.grep returns an array
    var path = $.grep(pathsFromStartToMachines, function(obj) {
      return obj.id === destinationId;
    });
    for (var i = 0; i < path[0].waypoints.length; i++) {
      var waypoint = path[0].waypoints[i];
      $('#' + palletId).animate({
        left: waypoint.left + 'px',
        top: waypoint.top + 'px'
      }, "slow"); //instead of slow you can use e.g. {duration: 2000}
    }
    $('#' + palletId).fadeOut("slow", function() {
      $('#' + palletId).remove();
    });
  };

  $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m1");
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m5");
  }, 1500);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m2");
  }, 3000);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m4");
  }, 4500);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m3");
  }, 6000);


  function generateId() {
    //generates a random number between 1 and 10000
    return Math.floor((Math.random() * 10000) + 1);
  }
});

#mainContainer > div {
  position: absolute;
}
#mainContainer {
  position: relative;
  width: 700px;
  height: 400px;
  border: 3px solid slategrey;
  background-color: whitesmoke;
}
div.machine {
  width: 60px;
  height: 60px;
  border: 3px solid darkslategray;
  border-radius: 12px;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  background-color: lightslategray;
  color: whitesmoke;
  font-family: Verdana, Helvetica, sans-serif;
}
.first-machine-line {
  top: 10%;
}
.second-machine-line {
  top: 50%;
}
#m1 {
  left: 30%;
}
#m2 {
  left: 50%;
}
#m3 {
  left: 70%;
}
#m4 {
  left: 30%;
}
#m5 {
  left: 50%;
}
.line {
  border: 0;
  background: lightgrey;
}
.horizontal {
  border-bottom: 2px dashed dimgrey;
}
.vertical {
  border-left: 2px dashed dimgrey;
}
#middleLine {
  width: 70%;
  top: calc((50% - 10% - 66px) / 2 + 10% + 66px);
  left: 20%;
}
.vertical-line {
  height: calc((50% - 10% - 66px) / 2);
}
.vertical-line-first-machine-line {
  top: calc(10% + 66px);
}
.vertical-line-second-machine-line {
  top: calc(10% + 66px + (50% - 10% - 66px) / 2);
}
#M1toMiddle {
  left: calc(30% + 66px / 2);
}
#M2toMiddle {
  left: calc(50% + 66px / 2);
}
#M3toMiddle {
  left: calc(70% + 66px / 2);
}
#M4toMiddle {
  left: calc(30% + 66px / 2);
}
#M5toMiddle {
  left: calc(50% + 66px / 2);
}
.pallet {
  width: 30px;
  height: 10px;
  background-color: dimgrey;
  border-radius: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <div id="mainContainer" class="relative">

    <div class="machine first-machine-line" id="m1">M1</div>
    <div class="machine first-machine-line" id="m2">M2</div>
    <div class="machine first-machine-line" id="m3">M3</div>

    <div class="machine second-machine-line" id="m4">M4</div>
    <div class="machine second-machine-line" id="m5">M5</div>

    <div class="line horizontal" id="middleLine"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M1toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M2toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M3toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-second-machine-line" id="M4toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-second-machine-line" id="M5toMiddle"></div>

  </div>
</body>

---

When testing in Safari, the lines were not positioned correctly and the start position of the pallets was at the top of the window. I got the expected layout and behavior by replacing the calc(...) expressions with simple values in the CSS. The result can be seen in this jsfiddle. For example, this style class:

#middleLine {
  width: 70%;
  top: calc((50% - 10% - 66px) / 2 + 10% + 66px);
  left: 20%;
}

is replaced with:

#middleLine {
  width: 70%;
  top: 38.5%;
  left: 20%;
}

An alternative, if more elaborate calculations are needed, is to compute the values in code and to set the position style properties with the css jQuery method.

Answer 2

you can check, what browser is it and add + 3px for mozilla

if($.browser.chrome) {
  //condition
} else if ($.browser.mozilla) {
  //condition
} else if ($.browser.msie) {
  //condition
}

Answer 3

use css3 instead of jquery animation