From 886712cc8e1126fd14b1342ea71e70400aa8b3b4 Mon Sep 17 00:00:00 2001
From: Gabriele Cirulli <gabrycir@gmail.com>
Date: Wed, 12 Mar 2014 15:40:49 +0100
Subject: [PATCH 1/2] add basic css transform positions

---
 style/main.css  | 206 ++++++++++++++++++++++++------------------------
 style/main.scss |  17 ++--
 2 files changed, 115 insertions(+), 108 deletions(-)

diff --git a/style/main.css b/style/main.css
index c28f9be..d76fc08 100644
--- a/style/main.css
+++ b/style/main.css
@@ -227,69 +227,69 @@ hr {
   height: 106.25px;
   line-height: 116.25px; }
   .tile.tile-position-1-1 {
-    position: absolute;
-    left: 0px;
-    top: 0px; }
+    -webkit-transform: translate(0px, 0px);
+    -moz-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); }
   .tile.tile-position-1-2 {
-    position: absolute;
-    left: 0px;
-    top: 121px; }
+    -webkit-transform: translate(0px, 121px);
+    -moz-transform: translate(0px, 121px);
+    transform: translate(0px, 121px); }
   .tile.tile-position-1-3 {
-    position: absolute;
-    left: 0px;
-    top: 243px; }
+    -webkit-transform: translate(0px, 243px);
+    -moz-transform: translate(0px, 243px);
+    transform: translate(0px, 243px); }
   .tile.tile-position-1-4 {
-    position: absolute;
-    left: 0px;
-    top: 364px; }
+    -webkit-transform: translate(0px, 364px);
+    -moz-transform: translate(0px, 364px);
+    transform: translate(0px, 364px); }
   .tile.tile-position-2-1 {
-    position: absolute;
-    left: 121px;
-    top: 0px; }
+    -webkit-transform: translate(121px, 0px);
+    -moz-transform: translate(121px, 0px);
+    transform: translate(121px, 0px); }
   .tile.tile-position-2-2 {
-    position: absolute;
-    left: 121px;
-    top: 121px; }
+    -webkit-transform: translate(121px, 121px);
+    -moz-transform: translate(121px, 121px);
+    transform: translate(121px, 121px); }
   .tile.tile-position-2-3 {
-    position: absolute;
-    left: 121px;
-    top: 243px; }
+    -webkit-transform: translate(121px, 243px);
+    -moz-transform: translate(121px, 243px);
+    transform: translate(121px, 243px); }
   .tile.tile-position-2-4 {
-    position: absolute;
-    left: 121px;
-    top: 364px; }
+    -webkit-transform: translate(121px, 364px);
+    -moz-transform: translate(121px, 364px);
+    transform: translate(121px, 364px); }
   .tile.tile-position-3-1 {
-    position: absolute;
-    left: 243px;
-    top: 0px; }
+    -webkit-transform: translate(243px, 0px);
+    -moz-transform: translate(243px, 0px);
+    transform: translate(243px, 0px); }
   .tile.tile-position-3-2 {
-    position: absolute;
-    left: 243px;
-    top: 121px; }
+    -webkit-transform: translate(243px, 121px);
+    -moz-transform: translate(243px, 121px);
+    transform: translate(243px, 121px); }
   .tile.tile-position-3-3 {
-    position: absolute;
-    left: 243px;
-    top: 243px; }
+    -webkit-transform: translate(243px, 243px);
+    -moz-transform: translate(243px, 243px);
+    transform: translate(243px, 243px); }
   .tile.tile-position-3-4 {
-    position: absolute;
-    left: 243px;
-    top: 364px; }
+    -webkit-transform: translate(243px, 364px);
+    -moz-transform: translate(243px, 364px);
+    transform: translate(243px, 364px); }
   .tile.tile-position-4-1 {
-    position: absolute;
-    left: 364px;
-    top: 0px; }
+    -webkit-transform: translate(364px, 0px);
+    -moz-transform: translate(364px, 0px);
+    transform: translate(364px, 0px); }
   .tile.tile-position-4-2 {
-    position: absolute;
-    left: 364px;
-    top: 121px; }
+    -webkit-transform: translate(364px, 121px);
+    -moz-transform: translate(364px, 121px);
+    transform: translate(364px, 121px); }
   .tile.tile-position-4-3 {
-    position: absolute;
-    left: 364px;
-    top: 243px; }
+    -webkit-transform: translate(364px, 243px);
+    -moz-transform: translate(364px, 243px);
+    transform: translate(364px, 243px); }
   .tile.tile-position-4-4 {
-    position: absolute;
-    left: 364px;
-    top: 364px; }
+    -webkit-transform: translate(364px, 364px);
+    -moz-transform: translate(364px, 364px);
+    transform: translate(364px, 364px); }
 
 .tile {
   border-radius: 3px;
@@ -297,11 +297,13 @@ hr {
   text-align: center;
   font-weight: bold;
   z-index: 10;
+  position: absolute;
   font-size: 55px;
   -webkit-transition: 100ms ease-in-out;
   -moz-transition: 100ms ease-in-out;
-  -webkit-transition-property: top, left;
-  -moz-transition-property: top, left; }
+  -webkit-transition-property: -webkit-transform;
+  -moz-transition-property: -moz-transform;
+  transition-property: transform; }
   .tile.tile-2 {
     background: #eee4da;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
@@ -397,8 +399,8 @@ hr {
 .tile-new {
   -webkit-animation: appear 200ms ease 100ms;
   -moz-animation: appear 200ms ease 100ms;
-  -webkit-animation-fill-mode: both;
-  -moz-animation-fill-mode: both; }
+  -webkit-animation-fill-mode: backwards;
+  -moz-animation-fill-mode: backwards; }
 
 @-webkit-keyframes pop {
   0% {
@@ -443,8 +445,8 @@ hr {
   z-index: 20;
   -webkit-animation: pop 200ms ease 100ms;
   -moz-animation: pop 200ms ease 100ms;
-  -webkit-animation-fill-mode: both;
-  -moz-animation-fill-mode: both; }
+  -webkit-animation-fill-mode: backwards;
+  -moz-animation-fill-mode: backwards; }
 
 .game-intro {
   margin-bottom: 0; }
@@ -562,69 +564,69 @@ hr {
     height: 57.5px;
     line-height: 67.5px; }
     .tile.tile-position-1-1 {
-      position: absolute;
-      left: 0px;
-      top: 0px; }
+      -webkit-transform: translate(0px, 0px);
+      -moz-transform: translate(0px, 0px);
+      transform: translate(0px, 0px); }
     .tile.tile-position-1-2 {
-      position: absolute;
-      left: 0px;
-      top: 68px; }
+      -webkit-transform: translate(0px, 68px);
+      -moz-transform: translate(0px, 68px);
+      transform: translate(0px, 68px); }
     .tile.tile-position-1-3 {
-      position: absolute;
-      left: 0px;
-      top: 135px; }
+      -webkit-transform: translate(0px, 135px);
+      -moz-transform: translate(0px, 135px);
+      transform: translate(0px, 135px); }
     .tile.tile-position-1-4 {
-      position: absolute;
-      left: 0px;
-      top: 203px; }
+      -webkit-transform: translate(0px, 203px);
+      -moz-transform: translate(0px, 203px);
+      transform: translate(0px, 203px); }
     .tile.tile-position-2-1 {
-      position: absolute;
-      left: 68px;
-      top: 0px; }
+      -webkit-transform: translate(68px, 0px);
+      -moz-transform: translate(68px, 0px);
+      transform: translate(68px, 0px); }
     .tile.tile-position-2-2 {
-      position: absolute;
-      left: 68px;
-      top: 68px; }
+      -webkit-transform: translate(68px, 68px);
+      -moz-transform: translate(68px, 68px);
+      transform: translate(68px, 68px); }
     .tile.tile-position-2-3 {
-      position: absolute;
-      left: 68px;
-      top: 135px; }
+      -webkit-transform: translate(68px, 135px);
+      -moz-transform: translate(68px, 135px);
+      transform: translate(68px, 135px); }
     .tile.tile-position-2-4 {
-      position: absolute;
-      left: 68px;
-      top: 203px; }
+      -webkit-transform: translate(68px, 203px);
+      -moz-transform: translate(68px, 203px);
+      transform: translate(68px, 203px); }
     .tile.tile-position-3-1 {
-      position: absolute;
-      left: 135px;
-      top: 0px; }
+      -webkit-transform: translate(135px, 0px);
+      -moz-transform: translate(135px, 0px);
+      transform: translate(135px, 0px); }
     .tile.tile-position-3-2 {
-      position: absolute;
-      left: 135px;
-      top: 68px; }
+      -webkit-transform: translate(135px, 68px);
+      -moz-transform: translate(135px, 68px);
+      transform: translate(135px, 68px); }
     .tile.tile-position-3-3 {
-      position: absolute;
-      left: 135px;
-      top: 135px; }
+      -webkit-transform: translate(135px, 135px);
+      -moz-transform: translate(135px, 135px);
+      transform: translate(135px, 135px); }
     .tile.tile-position-3-4 {
-      position: absolute;
-      left: 135px;
-      top: 203px; }
+      -webkit-transform: translate(135px, 203px);
+      -moz-transform: translate(135px, 203px);
+      transform: translate(135px, 203px); }
     .tile.tile-position-4-1 {
-      position: absolute;
-      left: 203px;
-      top: 0px; }
+      -webkit-transform: translate(203px, 0px);
+      -moz-transform: translate(203px, 0px);
+      transform: translate(203px, 0px); }
     .tile.tile-position-4-2 {
-      position: absolute;
-      left: 203px;
-      top: 68px; }
+      -webkit-transform: translate(203px, 68px);
+      -moz-transform: translate(203px, 68px);
+      transform: translate(203px, 68px); }
     .tile.tile-position-4-3 {
-      position: absolute;
-      left: 203px;
-      top: 135px; }
+      -webkit-transform: translate(203px, 135px);
+      -moz-transform: translate(203px, 135px);
+      transform: translate(203px, 135px); }
     .tile.tile-position-4-4 {
-      position: absolute;
-      left: 203px;
-      top: 203px; }
+      -webkit-transform: translate(203px, 203px);
+      -moz-transform: translate(203px, 203px);
+      transform: translate(203px, 203px); }
 
   .game-container {
     margin-top: 20px; }
diff --git a/style/main.scss b/style/main.scss
index b5e2609..68db1c4 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -282,9 +282,11 @@ hr {
     @for $x from 1 through $grid-row-cells {
       @for $y from 1 through $grid-row-cells {
         &.tile-position-#{$x}-#{$y} {
-          position: absolute;
-          left: round(($tile-size + $grid-spacing) * ($x - 1));
-          top: round(($tile-size + $grid-spacing) * ($y - 1));
+          $xPos: round(($tile-size + $grid-spacing) * ($x - 1));
+          $yPos: round(($tile-size + $grid-spacing) * ($y - 1));
+          -webkit-transform: translate($xPos, $yPos);
+          -moz-transform: translate($xPos, $yPos);
+          transform: translate($xPos, $yPos);
         }
       }
     }
@@ -301,11 +303,14 @@ hr {
   text-align: center;
   font-weight: bold;
   z-index: 10;
+  position: absolute;
 
   font-size: 55px;
 
   @include transition($transition-speed ease-in-out);
-  @include transition-property(top, left);
+  -webkit-transition-property: -webkit-transform;
+  -moz-transition-property: -moz-transform;
+  transition-property: transform;
 
   $base: 2;
   $exponent: 1;
@@ -394,7 +399,7 @@ hr {
 
 .tile-new {
   @include animation(appear 200ms ease $transition-speed);
-  @include animation-fill-mode(both);
+  @include animation-fill-mode(backwards);
 }
 
 @include keyframes(pop) {
@@ -417,7 +422,7 @@ hr {
 .tile-merged {
   z-index: 20;
   @include animation(pop 200ms ease $transition-speed);
-  @include animation-fill-mode(both);
+  @include animation-fill-mode(backwards);
 }
 
 .game-intro {

From 74494bb5f512265f913272e7b0748bf1958c1cbf Mon Sep 17 00:00:00 2001
From: Gabriele Cirulli <gabrycir@gmail.com>
Date: Thu, 13 Mar 2014 23:11:02 +0100
Subject: [PATCH 2/2] modify the game to allow using transforms

---
 js/html_actuator.js |  19 ++-
 style/helpers.scss  |  30 ++--
 style/main.css      | 385 ++++++++++++++++++++++++--------------------
 style/main.scss     |  62 ++++---
 4 files changed, 266 insertions(+), 230 deletions(-)

diff --git a/js/html_actuator.js b/js/html_actuator.js
index 04a137b..150f0b1 100644
--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -42,25 +42,27 @@ HTMLActuator.prototype.clearContainer = function (container) {
 HTMLActuator.prototype.addTile = function (tile) {
   var self = this;
 
-  var element   = document.createElement("div");
+  var wrapper   = document.createElement("div");
+  var inner     = document.createElement("div");
   var position  = tile.previousPosition || { x: tile.x, y: tile.y };
   positionClass = this.positionClass(position);
 
   // We can't use classlist because it somehow glitches when replacing classes
   var classes = ["tile", "tile-" + tile.value, positionClass];
-  this.applyClasses(element, classes);
+  this.applyClasses(wrapper, classes);
 
-  element.textContent = tile.value;
+  inner.classList.add("tile-inner");
+  inner.textContent = tile.value;
 
   if (tile.previousPosition) {
     // Make sure that the tile gets rendered in the previous position first
     window.requestAnimationFrame(function () {
       classes[2] = self.positionClass({ x: tile.x, y: tile.y });
-      self.applyClasses(element, classes); // Update the position
+      self.applyClasses(wrapper, classes); // Update the position
     });
   } else if (tile.mergedFrom) {
     classes.push("tile-merged");
-    this.applyClasses(element, classes);
+    this.applyClasses(wrapper, classes);
 
     // Render the tiles that merged
     tile.mergedFrom.forEach(function (merged) {
@@ -68,11 +70,14 @@ HTMLActuator.prototype.addTile = function (tile) {
     });
   } else {
     classes.push("tile-new");
-    this.applyClasses(element, classes);
+    this.applyClasses(wrapper, classes);
   }
 
+  // Add the inner part of the tile to the wrapper
+  wrapper.appendChild(inner);
+
   // Put the tile on the board
-  this.tileContainer.appendChild(element);
+  this.tileContainer.appendChild(wrapper);
 };
 
 HTMLActuator.prototype.applyClasses = function (element, classes) {
diff --git a/style/helpers.scss b/style/helpers.scss
index a8f108c..4e6dfa6 100644
--- a/style/helpers.scss
+++ b/style/helpers.scss
@@ -24,11 +24,31 @@
 @mixin transition($args...) {
   -webkit-transition: $args;
   -moz-transition: $args;
+  transition: $args;
 }
 
 @mixin transition-property($args...) {
   -webkit-transition-property: $args;
   -moz-transition-property: $args;
+  transition-property: $args;
+}
+
+@mixin animation($args...) {
+  -webkit-animation: $args;
+  -moz-animation: $args;
+  animation: $args;
+}
+
+@mixin animation-fill-mode($args...) {
+  -webkit-animation-fill-mode: $args;
+  -moz-animation-fill-mode: $args;
+  animation: $args;
+}
+
+@mixin transform($args...) {
+  -webkit-transform: $args;
+  -moz-transform: $args;
+  transform: $args;
 }
 
 // Keyframe animations
@@ -44,16 +64,6 @@
   }
 }
 
-@mixin animation($str) {
-  -webkit-animation: #{$str};
-  -moz-animation: #{$str};
-}
-
-@mixin animation-fill-mode($str) {
-  -webkit-animation-fill-mode: #{$str};
-  -moz-animation-fill-mode: #{$str};
-}
-
 // Media queries
 @mixin smaller($width) {
   @media screen and (max-width: $width) {
diff --git a/style/main.css b/style/main.css
index d76fc08..7bb376a 100644
--- a/style/main.css
+++ b/style/main.css
@@ -87,8 +87,10 @@ h1.title {
     z-index: 100;
     -webkit-animation: move-up 600ms ease-in;
     -moz-animation: move-up 600ms ease-in;
+    animation: move-up 600ms ease-in;
     -webkit-animation-fill-mode: both;
-    -moz-animation-fill-mode: both; }
+    -moz-animation-fill-mode: both;
+    animation: both; }
 
 .score-container:after {
   content: "Score"; }
@@ -168,8 +170,10 @@ hr {
     text-align: center;
     -webkit-animation: fade-in 800ms ease 1200ms;
     -moz-animation: fade-in 800ms ease 1200ms;
+    animation: fade-in 800ms ease 1200ms;
     -webkit-animation-fill-mode: both;
-    -moz-animation-fill-mode: both; }
+    -moz-animation-fill-mode: both;
+    animation: both; }
     .game-container .game-message p {
       font-size: 60px;
       font-weight: bold;
@@ -222,231 +226,252 @@ hr {
   position: absolute;
   z-index: 2; }
 
-.tile {
-  width: 106.25px;
-  height: 106.25px;
+.tile, .tile .tile-inner {
+  width: 107px;
+  height: 107px;
   line-height: 116.25px; }
-  .tile.tile-position-1-1 {
-    -webkit-transform: translate(0px, 0px);
-    -moz-transform: translate(0px, 0px);
-    transform: translate(0px, 0px); }
-  .tile.tile-position-1-2 {
-    -webkit-transform: translate(0px, 121px);
-    -moz-transform: translate(0px, 121px);
-    transform: translate(0px, 121px); }
-  .tile.tile-position-1-3 {
-    -webkit-transform: translate(0px, 243px);
-    -moz-transform: translate(0px, 243px);
-    transform: translate(0px, 243px); }
-  .tile.tile-position-1-4 {
-    -webkit-transform: translate(0px, 364px);
-    -moz-transform: translate(0px, 364px);
-    transform: translate(0px, 364px); }
-  .tile.tile-position-2-1 {
-    -webkit-transform: translate(121px, 0px);
-    -moz-transform: translate(121px, 0px);
-    transform: translate(121px, 0px); }
-  .tile.tile-position-2-2 {
-    -webkit-transform: translate(121px, 121px);
-    -moz-transform: translate(121px, 121px);
-    transform: translate(121px, 121px); }
-  .tile.tile-position-2-3 {
-    -webkit-transform: translate(121px, 243px);
-    -moz-transform: translate(121px, 243px);
-    transform: translate(121px, 243px); }
-  .tile.tile-position-2-4 {
-    -webkit-transform: translate(121px, 364px);
-    -moz-transform: translate(121px, 364px);
-    transform: translate(121px, 364px); }
-  .tile.tile-position-3-1 {
-    -webkit-transform: translate(243px, 0px);
-    -moz-transform: translate(243px, 0px);
-    transform: translate(243px, 0px); }
-  .tile.tile-position-3-2 {
-    -webkit-transform: translate(243px, 121px);
-    -moz-transform: translate(243px, 121px);
-    transform: translate(243px, 121px); }
-  .tile.tile-position-3-3 {
-    -webkit-transform: translate(243px, 243px);
-    -moz-transform: translate(243px, 243px);
-    transform: translate(243px, 243px); }
-  .tile.tile-position-3-4 {
-    -webkit-transform: translate(243px, 364px);
-    -moz-transform: translate(243px, 364px);
-    transform: translate(243px, 364px); }
-  .tile.tile-position-4-1 {
-    -webkit-transform: translate(364px, 0px);
-    -moz-transform: translate(364px, 0px);
-    transform: translate(364px, 0px); }
-  .tile.tile-position-4-2 {
-    -webkit-transform: translate(364px, 121px);
-    -moz-transform: translate(364px, 121px);
-    transform: translate(364px, 121px); }
-  .tile.tile-position-4-3 {
-    -webkit-transform: translate(364px, 243px);
-    -moz-transform: translate(364px, 243px);
-    transform: translate(364px, 243px); }
-  .tile.tile-position-4-4 {
-    -webkit-transform: translate(364px, 364px);
-    -moz-transform: translate(364px, 364px);
-    transform: translate(364px, 364px); }
+.tile.tile-position-1-1 {
+  -webkit-transform: translate(0px, 0px);
+  -moz-transform: translate(0px, 0px);
+  transform: translate(0px, 0px); }
+.tile.tile-position-1-2 {
+  -webkit-transform: translate(0px, 121px);
+  -moz-transform: translate(0px, 121px);
+  transform: translate(0px, 121px); }
+.tile.tile-position-1-3 {
+  -webkit-transform: translate(0px, 242px);
+  -moz-transform: translate(0px, 242px);
+  transform: translate(0px, 242px); }
+.tile.tile-position-1-4 {
+  -webkit-transform: translate(0px, 363px);
+  -moz-transform: translate(0px, 363px);
+  transform: translate(0px, 363px); }
+.tile.tile-position-2-1 {
+  -webkit-transform: translate(121px, 0px);
+  -moz-transform: translate(121px, 0px);
+  transform: translate(121px, 0px); }
+.tile.tile-position-2-2 {
+  -webkit-transform: translate(121px, 121px);
+  -moz-transform: translate(121px, 121px);
+  transform: translate(121px, 121px); }
+.tile.tile-position-2-3 {
+  -webkit-transform: translate(121px, 242px);
+  -moz-transform: translate(121px, 242px);
+  transform: translate(121px, 242px); }
+.tile.tile-position-2-4 {
+  -webkit-transform: translate(121px, 363px);
+  -moz-transform: translate(121px, 363px);
+  transform: translate(121px, 363px); }
+.tile.tile-position-3-1 {
+  -webkit-transform: translate(242px, 0px);
+  -moz-transform: translate(242px, 0px);
+  transform: translate(242px, 0px); }
+.tile.tile-position-3-2 {
+  -webkit-transform: translate(242px, 121px);
+  -moz-transform: translate(242px, 121px);
+  transform: translate(242px, 121px); }
+.tile.tile-position-3-3 {
+  -webkit-transform: translate(242px, 242px);
+  -moz-transform: translate(242px, 242px);
+  transform: translate(242px, 242px); }
+.tile.tile-position-3-4 {
+  -webkit-transform: translate(242px, 363px);
+  -moz-transform: translate(242px, 363px);
+  transform: translate(242px, 363px); }
+.tile.tile-position-4-1 {
+  -webkit-transform: translate(363px, 0px);
+  -moz-transform: translate(363px, 0px);
+  transform: translate(363px, 0px); }
+.tile.tile-position-4-2 {
+  -webkit-transform: translate(363px, 121px);
+  -moz-transform: translate(363px, 121px);
+  transform: translate(363px, 121px); }
+.tile.tile-position-4-3 {
+  -webkit-transform: translate(363px, 242px);
+  -moz-transform: translate(363px, 242px);
+  transform: translate(363px, 242px); }
+.tile.tile-position-4-4 {
+  -webkit-transform: translate(363px, 363px);
+  -moz-transform: translate(363px, 363px);
+  transform: translate(363px, 363px); }
 
 .tile {
-  border-radius: 3px;
-  background: #eee4da;
-  text-align: center;
-  font-weight: bold;
-  z-index: 10;
   position: absolute;
-  font-size: 55px;
   -webkit-transition: 100ms ease-in-out;
   -moz-transition: 100ms ease-in-out;
+  transition: 100ms ease-in-out;
   -webkit-transition-property: -webkit-transform;
   -moz-transition-property: -moz-transform;
   transition-property: transform; }
-  .tile.tile-2 {
+  .tile .tile-inner {
+    border-radius: 3px;
+    background: #eee4da;
+    text-align: center;
+    font-weight: bold;
+    z-index: 10;
+    font-size: 55px; }
+  .tile.tile-2 .tile-inner {
     background: #eee4da;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
-  .tile.tile-4 {
+  .tile.tile-4 .tile-inner {
     background: #ede0c8;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
-  .tile.tile-8 {
+  .tile.tile-8 .tile-inner {
     color: #f9f6f2;
     background: #f2b179; }
-  .tile.tile-16 {
+  .tile.tile-16 .tile-inner {
     color: #f9f6f2;
     background: #f59563; }
-  .tile.tile-32 {
+  .tile.tile-32 .tile-inner {
     color: #f9f6f2;
     background: #f67c5f; }
-  .tile.tile-64 {
+  .tile.tile-64 .tile-inner {
     color: #f9f6f2;
     background: #f65e3b; }
-  .tile.tile-128 {
+  .tile.tile-128 .tile-inner {
     color: #f9f6f2;
     background: #edcf72;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
     font-size: 45px; }
     @media screen and (max-width: 480px) {
-      .tile.tile-128 {
+      .tile.tile-128 .tile-inner {
         font-size: 25px; } }
-  .tile.tile-256 {
+  .tile.tile-256 .tile-inner {
     color: #f9f6f2;
     background: #edcc61;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
     font-size: 45px; }
     @media screen and (max-width: 480px) {
-      .tile.tile-256 {
+      .tile.tile-256 .tile-inner {
         font-size: 25px; } }
-  .tile.tile-512 {
+  .tile.tile-512 .tile-inner {
     color: #f9f6f2;
     background: #edc850;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
     font-size: 45px; }
     @media screen and (max-width: 480px) {
-      .tile.tile-512 {
+      .tile.tile-512 .tile-inner {
         font-size: 25px; } }
-  .tile.tile-1024 {
+  .tile.tile-1024 .tile-inner {
     color: #f9f6f2;
     background: #edc53f;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
     font-size: 35px; }
     @media screen and (max-width: 480px) {
-      .tile.tile-1024 {
+      .tile.tile-1024 .tile-inner {
         font-size: 15px; } }
-  .tile.tile-2048 {
+  .tile.tile-2048 .tile-inner {
     color: #f9f6f2;
     background: #edc22e;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
     font-size: 35px; }
     @media screen and (max-width: 480px) {
-      .tile.tile-2048 {
+      .tile.tile-2048 .tile-inner {
         font-size: 15px; } }
 
 @-webkit-keyframes appear {
   0% {
     opacity: 0;
     -webkit-transform: scale(0);
-    -moz-transform: scale(0); }
+    -moz-transform: scale(0);
+    transform: scale(0); }
 
   100% {
     opacity: 1;
     -webkit-transform: scale(1);
-    -moz-transform: scale(1); } }
+    -moz-transform: scale(1);
+    transform: scale(1); } }
 
 @-moz-keyframes appear {
   0% {
     opacity: 0;
     -webkit-transform: scale(0);
-    -moz-transform: scale(0); }
+    -moz-transform: scale(0);
+    transform: scale(0); }
 
   100% {
     opacity: 1;
     -webkit-transform: scale(1);
-    -moz-transform: scale(1); } }
+    -moz-transform: scale(1);
+    transform: scale(1); } }
 
 @keyframes appear {
   0% {
     opacity: 0;
     -webkit-transform: scale(0);
-    -moz-transform: scale(0); }
+    -moz-transform: scale(0);
+    transform: scale(0); }
 
   100% {
     opacity: 1;
     -webkit-transform: scale(1);
-    -moz-transform: scale(1); } }
+    -moz-transform: scale(1);
+    transform: scale(1); } }
 
-.tile-new {
+.tile-new .tile-inner {
   -webkit-animation: appear 200ms ease 100ms;
   -moz-animation: appear 200ms ease 100ms;
+  animation: appear 200ms ease 100ms;
   -webkit-animation-fill-mode: backwards;
-  -moz-animation-fill-mode: backwards; }
+  -moz-animation-fill-mode: backwards;
+  animation: backwards; }
 
 @-webkit-keyframes pop {
   0% {
     -webkit-transform: scale(0);
-    -moz-transform: scale(0); }
+    -moz-transform: scale(0);
+    transform: scale(0); }
 
   50% {
     -webkit-transform: scale(1.2);
-    -moz-transform: scale(1.2); }
+    -moz-transform: scale(1.2);
+    transform: scale(1.2); }
 
   100% {
     -webkit-transform: scale(1);
-    -moz-transform: scale(1); } }
+    -moz-transform: scale(1);
+    transform: scale(1); } }
 
 @-moz-keyframes pop {
   0% {
     -webkit-transform: scale(0);
-    -moz-transform: scale(0); }
+    -moz-transform: scale(0);
+    transform: scale(0); }
 
   50% {
     -webkit-transform: scale(1.2);
-    -moz-transform: scale(1.2); }
+    -moz-transform: scale(1.2);
+    transform: scale(1.2); }
 
   100% {
     -webkit-transform: scale(1);
-    -moz-transform: scale(1); } }
+    -moz-transform: scale(1);
+    transform: scale(1); } }
 
 @keyframes pop {
   0% {
     -webkit-transform: scale(0);
-    -moz-transform: scale(0); }
+    -moz-transform: scale(0);
+    transform: scale(0); }
 
   50% {
     -webkit-transform: scale(1.2);
-    -moz-transform: scale(1.2); }
+    -moz-transform: scale(1.2);
+    transform: scale(1.2); }
 
   100% {
     -webkit-transform: scale(1);
-    -moz-transform: scale(1); } }
+    -moz-transform: scale(1);
+    transform: scale(1); } }
 
-.tile-merged {
+.tile-merged .tile-inner {
   z-index: 20;
   -webkit-animation: pop 200ms ease 100ms;
   -moz-animation: pop 200ms ease 100ms;
+  animation: pop 200ms ease 100ms;
   -webkit-animation-fill-mode: backwards;
-  -moz-animation-fill-mode: backwards; }
+  -moz-animation-fill-mode: backwards;
+  animation: backwards; }
 
 .game-intro {
   margin-bottom: 0; }
@@ -505,8 +530,10 @@ hr {
       text-align: center;
       -webkit-animation: fade-in 800ms ease 1200ms;
       -moz-animation: fade-in 800ms ease 1200ms;
+      animation: fade-in 800ms ease 1200ms;
       -webkit-animation-fill-mode: both;
-      -moz-animation-fill-mode: both; }
+      -moz-animation-fill-mode: both;
+      animation: both; }
       .game-container .game-message p {
         font-size: 60px;
         font-weight: bold;
@@ -559,79 +586,79 @@ hr {
     position: absolute;
     z-index: 2; }
 
-  .tile {
-    width: 57.5px;
-    height: 57.5px;
+  .tile, .tile .tile-inner {
+    width: 58px;
+    height: 58px;
     line-height: 67.5px; }
-    .tile.tile-position-1-1 {
-      -webkit-transform: translate(0px, 0px);
-      -moz-transform: translate(0px, 0px);
-      transform: translate(0px, 0px); }
-    .tile.tile-position-1-2 {
-      -webkit-transform: translate(0px, 68px);
-      -moz-transform: translate(0px, 68px);
-      transform: translate(0px, 68px); }
-    .tile.tile-position-1-3 {
-      -webkit-transform: translate(0px, 135px);
-      -moz-transform: translate(0px, 135px);
-      transform: translate(0px, 135px); }
-    .tile.tile-position-1-4 {
-      -webkit-transform: translate(0px, 203px);
-      -moz-transform: translate(0px, 203px);
-      transform: translate(0px, 203px); }
-    .tile.tile-position-2-1 {
-      -webkit-transform: translate(68px, 0px);
-      -moz-transform: translate(68px, 0px);
-      transform: translate(68px, 0px); }
-    .tile.tile-position-2-2 {
-      -webkit-transform: translate(68px, 68px);
-      -moz-transform: translate(68px, 68px);
-      transform: translate(68px, 68px); }
-    .tile.tile-position-2-3 {
-      -webkit-transform: translate(68px, 135px);
-      -moz-transform: translate(68px, 135px);
-      transform: translate(68px, 135px); }
-    .tile.tile-position-2-4 {
-      -webkit-transform: translate(68px, 203px);
-      -moz-transform: translate(68px, 203px);
-      transform: translate(68px, 203px); }
-    .tile.tile-position-3-1 {
-      -webkit-transform: translate(135px, 0px);
-      -moz-transform: translate(135px, 0px);
-      transform: translate(135px, 0px); }
-    .tile.tile-position-3-2 {
-      -webkit-transform: translate(135px, 68px);
-      -moz-transform: translate(135px, 68px);
-      transform: translate(135px, 68px); }
-    .tile.tile-position-3-3 {
-      -webkit-transform: translate(135px, 135px);
-      -moz-transform: translate(135px, 135px);
-      transform: translate(135px, 135px); }
-    .tile.tile-position-3-4 {
-      -webkit-transform: translate(135px, 203px);
-      -moz-transform: translate(135px, 203px);
-      transform: translate(135px, 203px); }
-    .tile.tile-position-4-1 {
-      -webkit-transform: translate(203px, 0px);
-      -moz-transform: translate(203px, 0px);
-      transform: translate(203px, 0px); }
-    .tile.tile-position-4-2 {
-      -webkit-transform: translate(203px, 68px);
-      -moz-transform: translate(203px, 68px);
-      transform: translate(203px, 68px); }
-    .tile.tile-position-4-3 {
-      -webkit-transform: translate(203px, 135px);
-      -moz-transform: translate(203px, 135px);
-      transform: translate(203px, 135px); }
-    .tile.tile-position-4-4 {
-      -webkit-transform: translate(203px, 203px);
-      -moz-transform: translate(203px, 203px);
-      transform: translate(203px, 203px); }
+  .tile.tile-position-1-1 {
+    -webkit-transform: translate(0px, 0px);
+    -moz-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); }
+  .tile.tile-position-1-2 {
+    -webkit-transform: translate(0px, 67px);
+    -moz-transform: translate(0px, 67px);
+    transform: translate(0px, 67px); }
+  .tile.tile-position-1-3 {
+    -webkit-transform: translate(0px, 135px);
+    -moz-transform: translate(0px, 135px);
+    transform: translate(0px, 135px); }
+  .tile.tile-position-1-4 {
+    -webkit-transform: translate(0px, 202px);
+    -moz-transform: translate(0px, 202px);
+    transform: translate(0px, 202px); }
+  .tile.tile-position-2-1 {
+    -webkit-transform: translate(67px, 0px);
+    -moz-transform: translate(67px, 0px);
+    transform: translate(67px, 0px); }
+  .tile.tile-position-2-2 {
+    -webkit-transform: translate(67px, 67px);
+    -moz-transform: translate(67px, 67px);
+    transform: translate(67px, 67px); }
+  .tile.tile-position-2-3 {
+    -webkit-transform: translate(67px, 135px);
+    -moz-transform: translate(67px, 135px);
+    transform: translate(67px, 135px); }
+  .tile.tile-position-2-4 {
+    -webkit-transform: translate(67px, 202px);
+    -moz-transform: translate(67px, 202px);
+    transform: translate(67px, 202px); }
+  .tile.tile-position-3-1 {
+    -webkit-transform: translate(135px, 0px);
+    -moz-transform: translate(135px, 0px);
+    transform: translate(135px, 0px); }
+  .tile.tile-position-3-2 {
+    -webkit-transform: translate(135px, 67px);
+    -moz-transform: translate(135px, 67px);
+    transform: translate(135px, 67px); }
+  .tile.tile-position-3-3 {
+    -webkit-transform: translate(135px, 135px);
+    -moz-transform: translate(135px, 135px);
+    transform: translate(135px, 135px); }
+  .tile.tile-position-3-4 {
+    -webkit-transform: translate(135px, 202px);
+    -moz-transform: translate(135px, 202px);
+    transform: translate(135px, 202px); }
+  .tile.tile-position-4-1 {
+    -webkit-transform: translate(202px, 0px);
+    -moz-transform: translate(202px, 0px);
+    transform: translate(202px, 0px); }
+  .tile.tile-position-4-2 {
+    -webkit-transform: translate(202px, 67px);
+    -moz-transform: translate(202px, 67px);
+    transform: translate(202px, 67px); }
+  .tile.tile-position-4-3 {
+    -webkit-transform: translate(202px, 135px);
+    -moz-transform: translate(202px, 135px);
+    transform: translate(202px, 135px); }
+  .tile.tile-position-4-4 {
+    -webkit-transform: translate(202px, 202px);
+    -moz-transform: translate(202px, 202px);
+    transform: translate(202px, 202px); }
 
   .game-container {
     margin-top: 20px; }
 
-  .tile {
+  .tile .tile-inner {
     font-size: 35px; }
 
   .game-message p {
diff --git a/style/main.scss b/style/main.scss
index 68db1c4..8686dba 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -274,19 +274,19 @@ hr {
   }
 
   .tile {
-    width: $tile-size;
-    height: $tile-size;
-    line-height: $tile-size + 10px;
+    &, .tile-inner {
+      width: ceil($tile-size);
+      height: ceil($tile-size);
+      line-height: $tile-size + 10px;
+    }
 
     // Build position classes
     @for $x from 1 through $grid-row-cells {
       @for $y from 1 through $grid-row-cells {
         &.tile-position-#{$x}-#{$y} {
-          $xPos: round(($tile-size + $grid-spacing) * ($x - 1));
-          $yPos: round(($tile-size + $grid-spacing) * ($y - 1));
-          -webkit-transform: translate($xPos, $yPos);
-          -moz-transform: translate($xPos, $yPos);
-          transform: translate($xPos, $yPos);
+          $xPos: floor(($tile-size + $grid-spacing) * ($x - 1));
+          $yPos: floor(($tile-size + $grid-spacing) * ($y - 1));
+          @include transform(translate($xPos, $yPos));
         }
       }
     }
@@ -297,16 +297,20 @@ hr {
 @include game-field;
 
 .tile {
-  border-radius: $tile-border-radius;
+  position: absolute; // Makes transforms relative to the top-left corner
 
-  background: $tile-color;
-  text-align: center;
-  font-weight: bold;
-  z-index: 10;
-  position: absolute;
+  .tile-inner {
+    border-radius: $tile-border-radius;
 
-  font-size: 55px;
+    background: $tile-color;
+    text-align: center;
+    font-weight: bold;
+    z-index: 10;
 
+    font-size: 55px;
+  }
+
+  // Movement transition
   @include transition($transition-speed ease-in-out);
   -webkit-transition-property: -webkit-transform;
   -moz-transition-property: -moz-transform;
@@ -333,7 +337,7 @@ hr {
   @while $exponent <= $limit {
     $power: pow($base, $exponent);
 
-    &.tile-#{$power} {
+    &.tile-#{$power} .tile-inner {
       // Calculate base background color
       $gold-percent: ($exponent - 1) / ($limit - 1) * 100;
       $mixed-background: mix($tile-gold-color, $tile-color, $gold-percent);
@@ -386,40 +390,35 @@ hr {
 @include keyframes(appear) {
   0% {
     opacity: 0;
-    -webkit-transform: scale(0);
-    -moz-transform: scale(0);
+    @include transform(scale(0));
   }
 
   100% {
     opacity: 1;
-    -webkit-transform: scale(1);
-    -moz-transform: scale(1);
+    @include transform(scale(1));
   }
 }
 
-.tile-new {
+.tile-new .tile-inner {
   @include animation(appear 200ms ease $transition-speed);
   @include animation-fill-mode(backwards);
 }
 
 @include keyframes(pop) {
   0% {
-    -webkit-transform: scale(0);
-    -moz-transform: scale(0);
+    @include transform(scale(0));
   }
 
   50% {
-    -webkit-transform: scale(1.2);
-    -moz-transform: scale(1.2);
+    @include transform(scale(1.2));
   }
 
   100% {
-    -webkit-transform: scale(1);
-    -moz-transform: scale(1);
+    @include transform(scale(1));
   }
 }
 
-.tile-merged {
+.tile-merged .tile-inner {
   z-index: 20;
   @include animation(pop 200ms ease $transition-speed);
   @include animation-fill-mode(backwards);
@@ -460,11 +459,6 @@ hr {
     margin: 0 auto;
   }
 
-  // .scores-container {
-  //   float: left;
-  //   clear: left;
-  // }
-
   .score-container, .best-container {
     margin-top: 0;
     padding: 15px 10px;
@@ -483,7 +477,7 @@ hr {
   }
 
   // Rest of the font-size adjustments in the tile class
-  .tile {
+  .tile .tile-inner {
     font-size: 35px;
   }