🐛 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,7 +1,8 @@
 body {
   padding: 0;
   margin: 0;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   font-family: sans-serif;
   font-size: 140%;
   background-image: url('assets/Dash-logo.svg');
@@ -15,7 +16,8 @@ body {
   overflow: hidden;
 }
 * {
-  box-sizing: inherit;
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
 }
 a {
   color: inherit;
@@ -38,7 +40,9 @@ a {
   top: 50%;
   width: 77.5vw;
   height: 77.5vw;
-  transform: translate(-50%,-50%);
+  -webkit-transform: translate(-50%,-50%);
+      -ms-transform: translate(-50%,-50%);
+          transform: translate(-50%,-50%);
 }
 @media (max-height: 77.5vw) {
   .block:first-child {
@@ -49,7 +53,8 @@ a {
 .block {
   width: 15vw;
   height: 15vw;
-  box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);
+  -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;
   position: relative;
@@ -73,12 +78,17 @@ a {
   position: absolute;
   left: calc(var(--x) * 90% + 5%);
   top: calc(var(--y) * 90% + 5%);
-  transform: translate(-50%, -50%) rotate(var(--rotation));
+  -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%);
-  mask-size: contain;
-  mask-repeat: no-repeat;
-  mask-position: center;
+  -webkit-mask-size: contain;
+          mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+          mask-position: center;
 }
 
 #muteToggle, #connectionStatus {
@@ -99,8 +109,14 @@ 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;
-  transform: none;
+  transition: transform 0.5s, -webkit-transform 0.5s;
+  -webkit-transform: none;
+      -ms-transform: none;
+          transform: none;
 }
 #connectionStatus.is-disconnected:before {
   content: 'Disconnected';
@@ -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-delay: 2s;
-  transform: translate3d(0, -100%, 0);
+  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"
   }