From 07710c9547f9b278096d99e16bb66ac608d14e89 Mon Sep 17 00:00:00 2001
From: Bryan Braun <bbraun7@gmail.com>
Date: Wed, 12 Mar 2014 09:10:51 -0400
Subject: [PATCH] Resoved a couple cross-browser compatibility issues.

---
 README.markdown |  4 ++++
 base.css        |  1 +
 fish.html       | 32 ++++++++++++++++++++++++++++----
 index.html      |  2 +-
 messages.html   |  1 -
 messages2.html  | 10 +++++-----
 6 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/README.markdown b/README.markdown
index e5f995f..7b68fee 100644
--- a/README.markdown
+++ b/README.markdown
@@ -8,6 +8,10 @@ If so, then never fear --- CSS is here! Using modern CSS techniques like animati
 
 ### [See them here!](http://bryanbraun.github.io/after-dark-css/)
 
+#### Browsers
+
+These animations will only work in modern browsers. They have been tested in Chrome, Safari, & Firefox.
+
 #### Why?
 
 Just for fun. 
diff --git a/base.css b/base.css
index 066d5f7..ce8a3d1 100644
--- a/base.css
+++ b/base.css
@@ -18,6 +18,7 @@ body {
   margin: 0;
   height: 100%;
   font-family: 'ChicagoFLF', 'Times New Roman', 'Georgia', serif;
+  overflow: hidden;
 }
 
 /* Hide only visually, but have it available for screenreaders & for SEO purposes. See h5bp.com/v */
diff --git a/fish.html b/fish.html
index 35d4c8c..3c67743 100644
--- a/fish.html
+++ b/fish.html
@@ -268,7 +268,13 @@
         -o-transform: rotateY(180deg);
         transform: rotateY(180deg);
       }
-      52% { -webkit-transform: rotateY(0deg); }
+      52% {
+        -webkit-transform: rotateY(0);
+        -moz-transform: rotateY(0);
+        -ms-transform: rotateY(0);
+        -o-transform: rotateY(0);
+        transform: rotateY(0);
+      }
       100% { left: 110%; }
     }
     @-moz-keyframes rtl {
@@ -288,7 +294,13 @@
         -o-transform: rotateY(180deg);
         transform: rotateY(180deg);
       }
-      52% { -webkit-transform: rotateY(0deg); }
+      52% {
+        -webkit-transform: rotateY(0);
+        -moz-transform: rotateY(0);
+        -ms-transform: rotateY(0);
+        -o-transform: rotateY(0);
+        transform: rotateY(0);
+      }
       100% { left: 110%; }
     }
     @-o-keyframes rtl {
@@ -308,7 +320,13 @@
         -o-transform: rotateY(180deg);
         transform: rotateY(180deg);
       }
-      52% { -webkit-transform: rotateY(0deg); }
+      52% {
+        -webkit-transform: rotateY(0);
+        -moz-transform: rotateY(0);
+        -ms-transform: rotateY(0);
+        -o-transform: rotateY(0);
+        transform: rotateY(0);
+      }
       100% { left: 110%; }
     }
     @keyframes rtl {
@@ -328,7 +346,13 @@
         -o-transform: rotateY(180deg);
         transform: rotateY(180deg);
       }
-      52% { -webkit-transform: rotateY(0deg); }
+      52% {
+        -webkit-transform: rotateY(0);
+        -moz-transform: rotateY(0);
+        -ms-transform: rotateY(0);
+        -o-transform: rotateY(0);
+        transform: rotateY(0);
+      }
       100% { left: 110%; }
     }
     
diff --git a/index.html b/index.html
index 88d2d14..cd9562f 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,7 @@
     .title {
       text-align: center;
       font-size: 12px;
-      letter-spacing: -1px;
+      font-weight: normal;
       padding: 1px 0;
       margin: 1px 0 0 0;
       border-bottom: 1px solid #111;
diff --git a/messages.html b/messages.html
index 193a3fb..d132ff5 100644
--- a/messages.html
+++ b/messages.html
@@ -20,7 +20,6 @@
     font-size: 20px;
     color: white;
     position: absolute;
-    
   }
   
   /* Marquee Animation */
diff --git a/messages2.html b/messages2.html
index d2ff281..5861a7a 100644
--- a/messages2.html
+++ b/messages2.html
@@ -10,7 +10,7 @@
   /* ball styling */
   .message {
     display: block;
-    width: 462px;
+    width: 467px;
     margin: 0;
     color: white;
     position: absolute;
@@ -25,16 +25,16 @@
   /* animation keyframes */
   @-webkit-keyframes moveX {
     /* screen width - width of message */
-    from { left: 0; } to { left: calc(100% - 460px); }
+    from { left: 0; } to { left: calc(100% - 467px); }
   }
   @-moz-keyframes moveX {
-    from { left: 0; } to { left: calc(100% - 460px); }
+    from { left: 0; } to { left: calc(100% - 467px); }
   }
   @-o-keyframes moveX {
-    from { left: 0; } to { left: calc(100% - 460px); }
+    from { left: 0; } to { left: calc(100% - 467px); }
   }
   @keyframes moveX {
-    from { left: 0; } to { left: calc(100% - 460px); }
+    from { left: 0; } to { left: calc(100% - 467px); }
   }
   @-webkit-keyframes moveY {
     from { top: 0; } to { top: calc(100% - 26px); }