fix ie10 rendering of card flip, closes #51

jessepollak · Jun 27, 2014 · c03302b · c03302b
1 parent e1072e6
commit c03302b
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 3 deletions.
diff --git a/gulpfile.coffee b/gulpfile.coffee
@@ -15,7 +15,7 @@ development = process.env.NODE_ENV == 'development'
 
 gulp.task 'scss', ->
   gulp.src ['./src/scss/**/*.scss']
-  .pipe scss()
+  .pipe scss().on('error', console.log)
   .pipe prefix("> 1%")
   .pipe livereload(server)
   .pipe gulp.dest('./lib/css')

diff --git a/lib/css/card.css b/lib/css/card.css
@@ -1,3 +1,36 @@
+.card.safari.identified .front:before, .card.safari.identified .back:before {
+  background-image: -webkit-repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(315deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), -webkit-repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(240deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
+  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
+  background-image: -webkit-repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(315deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), -webkit-repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(240deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(115deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
+  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), linear-gradient(-25deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%); }
+
+.card.ie-10.flipped {
+  -webkit-transform: 0deg;
+  -ms-transform: 0deg;
+  transform: 0deg; }
+  .card.ie-10.flipped .front {
+    -webkit-transform: rotateY(0deg);
+    -ms-transform: rotateY(0deg);
+    transform: rotateY(0deg); }
+  .card.ie-10.flipped .back {
+    -webkit-transform: rotateY(0deg);
+    -ms-transform: rotateY(0deg);
+    transform: rotateY(0deg); }
+    .card.ie-10.flipped .back:after {
+      left: 18%; }
+    .card.ie-10.flipped .back .cvc {
+      -webkit-transform: rotateY(180deg);
+      -ms-transform: rotateY(180deg);
+      transform: rotateY(180deg);
+      left: 5%; }
+    .card.ie-10.flipped .back .shiny {
+      left: 84%; }
+      .card.ie-10.flipped .back .shiny:after {
+        left: -480%;
+        -webkit-transform: rotateY(180deg);
+        -ms-transform: rotateY(180deg);
+        transform: rotateY(180deg); }
+
 .card-logo {
   height: 36px;
   width: 60px;

diff --git a/lib/js/card.js b/lib/js/card.js
@@ -604,9 +604,12 @@ Card = (function() {
     if (typeof navigator !== "undefined" && navigator !== null ? navigator.userAgent : void 0) {
       ua = navigator.userAgent.toLowerCase();
       if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1) {
-        return this.$card.addClass('no-radial-gradient');
+        this.$card.addClass('safari');
       }
     }
+    if (new Function("/*@cc_on return @_jscript_version; @*/")()) {
+      return this.$card.addClass('ie-10');
+    }
   };
 
   Card.prototype.attachHandlers = function() {

diff --git a/src/coffee/card.coffee b/src/coffee/card.coffee
@@ -111,7 +111,9 @@ class Card
     if navigator?.userAgent
       ua = navigator.userAgent.toLowerCase()
       if ua.indexOf('safari') != -1 and ua.indexOf('chrome') == -1
-        @$card.addClass 'no-radial-gradient'
+        @$card.addClass 'safari'
+    if (new Function("/*@cc_on return @_jscript_version; @*/")())
+      @$card.addClass 'ie-10'
 
   attachHandlers: ->
     @$numberInput

diff --git a/src/scss/browsers/_ie-10.scss b/src/scss/browsers/_ie-10.scss
@@ -0,0 +1,28 @@
+.card.ie-10 {
+    &.flipped {
+        @include transform(0deg);
+        .front {
+            @include transform(rotateY(0deg));
+        }
+        .back {
+            @include transform(rotateY(0deg));
+
+            &:after {
+               left: 18%;
+            }
+
+            .cvc {
+                @include transform(rotateY(180deg));
+                left: 5%;
+            }
+
+            .shiny  {
+                left: 84%;
+                &:after {
+                    left: -480%;
+                    @include transform(rotateY(180deg));
+                }
+            }
+        }
+    }
+}
diff --git a/src/scss/browsers/_safari.scss b/src/scss/browsers/_safari.scss
@@ -0,0 +1,9 @@
+.card.safari {
+   &.identified {
+        .front, .back {
+            &:before {
+                @include card-texture($radial-gradient: false);
+            }
+        }
+    }
+}
diff --git a/src/scss/card.scss b/src/scss/card.scss
@@ -1,6 +1,10 @@
 @import "bourbon/dist/bourbon";
 @import "mixins";
 
+// browser specific hacks
+@import "browsers/safari";
+@import "browsers/ie-10";
+
 @import "cards/amex";
 @import "cards/discover";
 @import "cards/visa";