chrome percentage transforms for svg now work the same way as firefox

danielabar · Feb 16, 2018 · 194e91b · 194e91b
1 parent afe8bb3
commit 194e91b
Showing 1 changed file with 34 additions and 35 deletions.
diff --git a/js/animation-control.js b/js/animation-control.js
@@ -12,41 +12,40 @@ const rightFoot = document.querySelector('.right-foot');
 let animationIndex = 0;
 
 let init = function() {
-  if (typeof InstallTrigger !== 'undefined') {
-    document.body.classList.add('ff');
-
-    // owl-graphic: transform-origin: center bottom
-    const owlGraphicBbox = owlGraphic.getBBox();
-    const owlGraphicToX = owlGraphicBbox.x + (owlGraphicBbox.width / 2);
-    const owlGraphicToY = owlGraphicBbox.y + owlGraphicBbox.height;
-    owlGraphic.style['transform-origin'] = `${owlGraphicToX}px ${owlGraphicToY}px`;
-
-    // eyes transform-origin: 50% 50%
-    const eyesBbox = eyes.getBBox();
-    const eyesToX = eyesBbox.x + (eyesBbox.width / 2);
-    const eyesToY = eyesBbox.y + (eyesBbox.height / 2);
-    eyes.style['transform-origin'] = `${eyesToX}px ${eyesToY}px`;
-
-    // left-wing transform-origin: right top
-    const leftWingBbox = leftWing.getBBox();
-    const leftWingToX = leftWingBbox.x + leftWingBbox.width;
-    const leftWingToY = leftWingBbox.y;
-    leftWing.style['transform-origin'] = `${leftWingToX}px ${leftWingToY}px`;
-
-    // right-wing transform-origin: left top
-    const rightWingBbox = rightWing.getBBox();
-    const rightWingToX = rightWingBbox.x;
-    const rightWingToY = rightWingBbox.y;
-    rightWing.style['transform-origin'] = `${rightWingToX}px ${rightWingToY}px`;
-
-    // foot transform-origin: center top
-    for (let i = 0; i < feet.length; i++) {
-      let footEl = feet[i];
-      let footBbox = footEl.getBBox();
-      let footToX = footBbox.x + (footBbox.width / 2);
-      let footToY = footBbox.y;
-      footEl.style['transform-origin'] = `${footToX}px ${footToY}px`;
-    }
+  // As of Chrome 64, percentage based transforms work the same way as Firefox
+  document.body.classList.add('ff');
+
+  // owl-graphic: transform-origin: center bottom
+  const owlGraphicBbox = owlGraphic.getBBox();
+  const owlGraphicToX = owlGraphicBbox.x + (owlGraphicBbox.width / 2);
+  const owlGraphicToY = owlGraphicBbox.y + owlGraphicBbox.height;
+  owlGraphic.style['transform-origin'] = `${owlGraphicToX}px ${owlGraphicToY}px`;
+
+  // eyes transform-origin: 50% 50%
+  const eyesBbox = eyes.getBBox();
+  const eyesToX = eyesBbox.x + (eyesBbox.width / 2);
+  const eyesToY = eyesBbox.y + (eyesBbox.height / 2);
+  eyes.style['transform-origin'] = `${eyesToX}px ${eyesToY}px`;
+
+  // left-wing transform-origin: right top
+  const leftWingBbox = leftWing.getBBox();
+  const leftWingToX = leftWingBbox.x + leftWingBbox.width;
+  const leftWingToY = leftWingBbox.y;
+  leftWing.style['transform-origin'] = `${leftWingToX}px ${leftWingToY}px`;
+
+  // right-wing transform-origin: left top
+  const rightWingBbox = rightWing.getBBox();
+  const rightWingToX = rightWingBbox.x;
+  const rightWingToY = rightWingBbox.y;
+  rightWing.style['transform-origin'] = `${rightWingToX}px ${rightWingToY}px`;
+
+  // foot transform-origin: center top
+  for (let i = 0; i < feet.length; i++) {
+    let footEl = feet[i];
+    let footBbox = footEl.getBBox();
+    let footToX = footBbox.x + (footBbox.width / 2);
+    let footToY = footBbox.y;
+    footEl.style['transform-origin'] = `${footToX}px ${footToY}px`;
   }
 }