在IE中设置设置超时，并在Firefox中出现奇怪行为的情况下转换3d

Question

我在IE中出现动画抖动问题，在Firefox中出现一些非常奇怪的行为。

在Chrome中，一切运行正常。

代码在代码段中，但是从本质上讲，我的想法是在div中创建一些正方形，然后通过在正方形上添加“矢量”，然后通过translate3d()将其移动来移动它们。

然后我通过偏移正方形的位置来移动正方形，方法是每秒将该向量添加到原始位置来实现（因此，如果向量在1秒时是x：30，y：30，它将平移30,30，然后在第二秒它会翻译60、60等）

我猜测IE中的问题仅仅是setInterval()的计时问题，原因是事实只是断断续续，但Firefox问题困扰我，因为它在所有div（正方形）上似乎都不一致< / p>

如果有人能指出我正确的方向，那将不胜感激，因为目前我还没有头绪！

注释

前150行左右只是jQuery的替代品，请为我的代码查找“ // main code”注释。

此示例在IE 9中不起作用，因为我没有包括jQuery替换所需的polyfill，如果有任何东西可能会以您建议修复的任何方法在IE9中绊倒我，那么让我知道。

此操作无需任何外部依赖项，因此请不要使用任何库。

如果无法解决IE问题，我不会太在意，因为我可以禁用动画。

谢谢！

//tiny replacement for jquery
!function (b, c, d, e, f) {

  f = b['add' + e]

  function i(a, d, i) {
    for(d = (a && a.nodeType ? [a] : '' + a === a ? b.querySelectorAll(a) : c), i = d.length; i--; c.unshift.call(this, d[i]));
  }

  $ = function (a) {
    return /^f/.test(typeof a) ? /in/.test(b.readyState) ? setTimeout('$('+a+')', 9) : a() : new i(a)
  }

  $[d] = i[d] = {
    on: function (a, b) {
      return this.each(function (c) {
        f ? c['add' + e](a, b, false) : c.attachEvent('on' + a, b)
      })
    },
    off: function (a, b) {
      return this.each(function (c) {
        f ? c['remove' + e](a, b) : c.detachEvent('on' + a, b)
      })
    },
    each: function (a, b) {
      for (var c = this, d = 0, e = c.length; d < e; ++d) {
        a.call(b || c[d], c[d], d, c)
      }
      return c
    },
    splice: c.splice
  }
}(document, [], 'prototype', 'EventListener');
$.prototype.find = function(selector) {
  return $(selector, this);
};
$.prototype.parent = function() {
  return (this.length == 1) ? $(this[0].parentNode): [];
};
$.prototype.first = function() {
  return $(this[0]);
};
$.prototype.focus = function() {
  return this[0].focus();
};
var props = ['add', 'remove', 'toggle', 'has'],
maps = ['add', 'remove', 'toggle', 'contains'];
props.forEach(function(prop, index) {
  $.prototype[prop + 'Class'] = function(a) {
    return this.each(function(b) {
        if(a){
            b.classList[maps[index]](a);
        }
    });
  };
});
$.prototype.css = function(a, b) {
  if (typeof(a) === 'object') {
    for(var prop in a) {
      this.each(function(c) {
        c.style[prop] = a[prop];
      });
    }
    return this;
  } else {
      
    return b === []._ ? this[0].style[a] : this.each(function(c) {
      c.style[a] = b;
    });
  }
};
$.prototype.text = function(a) {
    console.log(a);
  return a === []._ ? this[0].textContent : this.each(function(b) {
    b.textContent = a;
  });
};
$.prototype.html = function(a) {
  return a === []._ ? this[0].innerHTML : this.each(function(b) {
    b.innerHTML = a;
  });
};
$.prototype.attr = function(a, b) {
  return b === []._ ? this[0].getAttribute(a) : this.each(function(c) {
    c.setAttribute(a, b);
  });
};
$.param = function(obj, prefix) {
  var str = [];
  for(var p in obj) {
    var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
    str.push(typeof v == "object" ? $.param(v, k) : encodeURIComponent(k) + "=" + encodeURIComponent(v));
  }
  return str.join("&");
};
$.prototype.append = function(a) {
  return this.each(function(b) {
    b.appendChild(a[0]);
  });
  };
$.ajax = function(a, b, c, d) {
  var xhr = new XMLHttpRequest();
  // 1 == post, 0 == get
  var type = (typeof(b) === 'object') ? 1: 0;
  var gp = ['GET', 'POST'];
  xhr.open(gp[type], a, true);
  xhr.responseType = (typeof(c) === 'string') ? c: '';
  var cb = (!type) ? b: c;
  xhr.onerror = function() {
    cb(this, true);
  };
  xhr.onreadystatechange = function() {
    if (this.readyState === 4) {
      if (this.status >= 200 && this.status < 400){
        cb(this.response, false);
      } else {
        cb(this, true);
      }
    }
  };
  if (type) {
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send($.param(b));
  } else {
    xhr.send();
  }
  xhr = null;
};

//main code

  
$(function () {  
    
function rn(min,max)
{
    var range = max - min;
    var randomNumber = Math.floor(Math.random() * (range)) + min;
    return randomNumber;
}
function createVector(){
  var xa = rn(-100,100);
  var ya = rn(-100,100);
  return {x: xa, y: ya};
}

function getSupportedPropertyName(properties) {
    for (var i = 0; i < properties.length; i++) {
        if (typeof document.body.style[properties[i]] != "undefined") {
            return properties[i];
        }
    }
    return null;
}
 
 
var transform = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"];
var filter = ["filter", "ms-filter", "webkit-filter", "moz-filter", "ms-filter"];
var transformProperty = getSupportedPropertyName(transform); 
var filterProperty = getSupportedPropertyName(filter); 
 
 
 
var container = window.getComputedStyle(document.querySelector('.container'));

var fullWidth = parseInt(container.width, 10);
var fullHeight = parseInt(container.height, 10);

var squares = [];

function createSquare(x){
    
  var sq = document.createElement("div");
  $(sq).addClass("square");
  
  var sqobj = {};
  sqobj.id = "sq" + x;
  sqobj.vector = createVector();
  sqobj.top = rn(-200, fullHeight + 200);
  sqobj.left = rn(-200, fullWidth+ 200);
  sqobj.widthHeight = rn(10,170);
  
  
  
  sqobj.offestTop = 0;
  sqobj.offestLeft = 0;
  
  var opacity = rn(15, 80) * 0.01;
  
  $(sq).css("top", sqobj.top + "px");
  $(sq).css("left", sqobj.left + "px");
  $(sq).css("width", sqobj.widthHeight+ "px");
  $(sq).css("height", sqobj.widthHeight+ "px");
  $(sq).css("opacity", opacity);
  $(sq).css("filter", "blur(" + rn(1,2) + "px)");
  $(sq).attr("id", "sq" + x);
  
  var rtrn = {};
  rtrn.square = $(sq);
  rtrn.squareObj = sqobj;
  
  return rtrn;
}

var numSquares = parseInt(fullHeight / 25, 10);

for (x = 0; x < numSquares; x++) {
  var square = createSquare(x);
  $(".container").append(square.square);
  squares.push(square.squareObj);
}

function animate(){
    if (transformProperty) {
        
        
        for(y = 0; y < squares.length; y++){
       var square = squares[y];
       
       square.offestLeft = parseInt(square.offestLeft) + parseInt(square.vector.x);
       square.offestTop = parseInt(square.offestTop) + parseInt(square.vector.y);
       
       if(square.left + square.offestLeft + square.widthHeight < 0 || square.left + square.offestLeft - square.widthHeight > fullWidth){
           square.vector.x = square.vector.x * -1;
       }
       if(square.top + square.offestTop + square.widthHeight < 0 || square.offestTop + square.top - square.widthHeight > fullHeight){
           square.vector.y = square.vector.y * -1;
       }
       
    document.querySelector("#" + square.id).style[transformProperty] = "translate3d(" + square.offestLeft + "px, " +  square.offestTop + "px, 0px) rotate(45deg)";

   };
   }
}
animate();
window.setInterval(function(){
  animate();
}, 1000);
});

                    /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
html {
  line-height: 1.5; 
  -webkit-text-size-adjust: 100%; 
  font-size: 16px;
  font-size: 100%;
}
body {
  margin: 0;
  font-family:Century Gothic, Verdana, sans-serif;
  -webkit-font-smoothing:antialiased;
    -moz-font-smoothing:antialiased;
    overflow: hidden;
}
a:focus,
button:focus{
    outline: none;
}
h1 {
  font-size: 3em;
  margin: 0.2em 0;
}
h2 {
  font-size: 2.2em;
  margin: 0.2em 0;
}
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
a {
  background-color: transparent;
  text-decoration: none;
}
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
button,
input { /* 1 */
  overflow: visible;
}
button,
select { /* 1 */
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
.vh { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}



.background{
    position: absolute;
    width: 100%;
}
.background-image{
    position: relative;
    width: 100%;
}
.background-image img{
    width: 100%;
}
.bg-cover{
    width: 100%;
    height: 100%;
    background-color: #1a6766;
    opacity: 0.75;
    position: absolute;
    top: 0;
    left: 0;
}

    #holder{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
}
.container{
  transform: rotate(225deg);
  width: 60%;
  height: 130%;
  background-color: #1a6766;
  opacity: 0.7;
  left: -20%;
  top: -15%;
  overflow: hidden; 
  z-index: 999999;
  position: absolute;
  border-radius: 4px;
}
.square{
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  position: absolute;
  transition: all 1s linear;
  border-radius: 2px;
}
.open .container{
    transform: rotate(0deg);
}
.square:hover{
    opacity: 1!important;
    
}

main{
    position: fixed;
    right:-65%;
    top: 0;
    bottom: 0;
    width: 65%;
    background-color: #fff;
    z-index: 20;
}
.open main{
    right: 0;
}

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>Kluio Website</title>
        <meta name="description" content="Branding, Marketing, Websites and Software, designed to fit your business">
        <meta name="viewport" content="width=device-width, initial-scale=1">


        <link rel="stylesheet" href="http://localhost/kluio-final/css/above-the-fold.css" media="all">

        <link rel="stylesheet" href="http://localhost/kluio-final/css/kluio-main.css" media="all">
        <link rel="stylesheet" href="http://localhost/kluio-final/css/kluio-480.css"  media="screen and (max-width: 480px)">
        <link rel="stylesheet" href="http://localhost/kluio-final/css/animations.css" media="all">


    </head>
    
    <body class="">   
    
    
<div class="background">
    <div class="background-image">
    </div>
    <div class="bg-cover"></div>
    <div id="holder">
        <div class="container">
        
    </div>
    </div>
</div>


<main>









</main>
<!--footer-->




</body>
</html>