🐛 Fix webkit rendering issues

app/application.js

@@ -110,6 +110,7 @@ var App = {
         PAINT.big[Math.floor(tx.paintIndex * 12)] :
         PAINT.small[Math.floor(tx.paintIndex * 11)]
       ) + ')';
+      paint.style.setProperty('-webkit-mask-image', paint.style.maskImage);
       paint.style.setProperty('--x', tx.x);
       paint.style.setProperty('--y', tx.y);
       paint.style.setProperty('--size', Math.log(1 + tx.value)/Math.log(2));

app/styles/main.css

@@ -1,6 +1,7 @@
 body {
   padding: 0;
   margin: 0;
+  -webkit-box-sizing: border-box;
           box-sizing: border-box;
   font-family: sans-serif;
   font-size: 140%;
@@ -15,6 +16,7 @@ body {
   overflow: hidden;
 }
 * {
+  -webkit-box-sizing: inherit;
           box-sizing: inherit;
 }
 a {
@@ -38,6 +40,8 @@ a {
   top: 50%;
   width: 77.5vw;
   height: 77.5vw;
+  -webkit-transform: translate(-50%,-50%);
+      -ms-transform: translate(-50%,-50%);
           transform: translate(-50%,-50%);
 }
 @media (max-height: 77.5vw) {
@@ -49,6 +53,7 @@ a {
 .block {
   width: 15vw;
   height: 15vw;
+  -webkit-box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);
           box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);
   background-color: #eee;
   margin: 0 auto 1em;
@@ -73,11 +78,16 @@ a {
   position: absolute;
   left: calc(var(--x) * 90% + 5%);
   top: calc(var(--y) * 90% + 5%);
+  -webkit-transform: translate(-50%, -50%) rotate(var(--rotation));
+      -ms-transform: translate(-50%, -50%) rotate(var(--rotation));
           transform: translate(-50%, -50%) rotate(var(--rotation));
   height: calc(var(--size) * 20% + 20%);
   width: calc(var(--size) * 20% + 20%);
+  -webkit-mask-size: contain;
           mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
           mask-repeat: no-repeat;
+  -webkit-mask-position: center;
           mask-position: center;
 }
 
@@ -99,7 +109,13 @@ a {
   right: 0;
   border-radius: 0 0 0 0.5em;
   border-width: 0 0 0.1em 0.1em;
+  -webkit-transition: -webkit-transform 0.5s;
+  transition: -webkit-transform 0.5s;
+  -o-transition: transform 0.5s;
   transition: transform 0.5s;
+  transition: transform 0.5s, -webkit-transform 0.5s;
+  -webkit-transform: none;
+      -ms-transform: none;
           transform: none;
 }
 #connectionStatus.is-disconnected:before {
@@ -115,7 +131,14 @@ a {
   color: green;
 }
 #connectionStatus.is-connected {
+  -webkit-transition: -webkit-transform 0.5s;
+  transition: -webkit-transform 0.5s;
+  -o-transition: transform 0.5s;
   transition: transform 0.5s;
+  transition: transform 0.5s, -webkit-transform 0.5s;
+  -webkit-transition-delay: 2s;
+       -o-transition-delay: 2s;
           transition-delay: 2s;
+  -webkit-transform: translate3d(0, -100%, 0);
           transform: translate3d(0, -100%, 0);
 }

package.json

@@ -8,9 +8,8 @@
   "license": "MIT",
   "private": false,
   "dependencies": {
-    "autoprefixer": "^7.1.4",
     "less": "^2.7.2",
-    "socket.io": "^2.0.3"
+    "socket.io": "^2.2.0"
   },
   "scripts": {
     "watch": "brunch watch -s",
@@ -19,7 +18,7 @@
   },
   "devDependencies": {
     "browser-sync-brunch": "^0.0.9",
-    "brunch": "^2.10.10",
+    "brunch": "^2.10.17",
     "git-directory-deploy": "^1.5.1",
     "less-brunch": "^2.10.0"
   }