From a5ace59788e3005155f0aa4753cd1b89c9922e5f Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Wed, 7 Feb 2018 18:51:48 -0500
Subject: [PATCH] init commit

---
 src/stylus/components/_avatars.styl |  5 +++--
 src/stylus/components/_buttons.styl | 18 ++++++++++++------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/stylus/components/_avatars.styl b/src/stylus/components/_avatars.styl
index 6af894fbd80..d2ea8a190ef 100755
--- a/src/stylus/components/_avatars.styl
+++ b/src/stylus/components/_avatars.styl
@@ -5,6 +5,7 @@
   border-radius: 50%
   display: inline-flex
   justify-content: center
+  position: relative
   text-align: center
   vertical-align: middle
 
@@ -13,10 +14,10 @@
     border-radius: 50%
     height: inherit
     width: inherit
-    
+
   &--tile
     border-radius: 0
 
     img,
     .icon
-      border-radius: 0
\ No newline at end of file
+      border-radius: 0
diff --git a/src/stylus/components/_buttons.styl b/src/stylus/components/_buttons.styl
index 758947c936e..69e5bac7cb5 100755
--- a/src/stylus/components/_buttons.styl
+++ b/src/stylus/components/_buttons.styl
@@ -163,12 +163,20 @@ theme(button, "btn")
       :not(:only-child)
         transition: $primary-transition
 
+        &:first-child
+          opacity: 1
+
         &:last-child
           opacity: 0
-          position: absolute
           transform: rotate(-45deg)
-          left: calc(50% - 12px)
-          top: calc(50% - 12px)
+
+        &:last-child,
+        &:first-child
+          // https://stackoverflow.com/questions/14729492/css3-transform-rotate-causing-1px-shift-in-chrome
+          -webkit-backface-visibility: hidden
+          position: absolute
+          left: 0
+          top: 0
 
     &.btn--active
       .btn__content
@@ -176,12 +184,10 @@ theme(button, "btn")
           &:first-child
             opacity: 0
             transform: rotate(45deg)
-            left: 'calc(50% - %s)' % (24 / 2)
-            top: 'calc(50% - %s)' % (24 / 2)
 
           &:last-child
             opacity: 1
-            transform: none
+            transform: rotate(0)
 
     .icon
       height: inherit