From 4d12ea732726d50fc036d582d2f2d12a713098a5 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 28 Jan 2021 14:31:52 -0800
Subject: [PATCH] fix(Tag): fix issues with skeleton in safari (#7679)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/components/src/components/tag/_tag.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index 5af384956fea..ac35cf0780e8 100644
--- a/packages/components/src/components/tag/_tag.scss
+++ b/packages/components/src/components/tag/_tag.scss
@@ -243,10 +243,17 @@
   // Skeleton state
   .#{$prefix}--tag.#{$prefix}--skeleton {
     @include skeleton;
-    @include tag-theme($bg-color: $ui-03, $text-color: $text-01);
+    @include tag-theme($bg-color: $skeleton-01, $text-color: $text-01);
 
     width: rem(60px);
     overflow: hidden;
+
+    // Safari specific bug (#7672)
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+        transform: translateZ(0);
+      }
+    }
   }
 }