From b75686633420395751fc84ac4875a96058e58f36 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Thu, 22 Dec 2022 21:23:58 +0100
Subject: [PATCH] UX: switch webkit to pseudoelement for fadeout (#19587)

---
 .../common/components/hashtag.scss            | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/common/components/hashtag.scss b/app/assets/stylesheets/common/components/hashtag.scss
index dbaccbbb123..fa01b928a10 100644
--- a/app/assets/stylesheets/common/components/hashtag.scss
+++ b/app/assets/stylesheets/common/components/hashtag.scss
@@ -45,16 +45,27 @@ a.hashtag-cooked {
     height: inherit;
     max-height: inherit;
     overflow-y: auto;
-    -webkit-mask: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 1) calc(100% - 1.5em),
-      rgba(255, 255, 255, 0) 100%
-    );
+
+    &:after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 1.5em;
+      background: linear-gradient(
+        to bottom,
+        rgba(var(--secondary-rgb), 0),
+        rgba(var(--secondary-rgb), 100%)
+      );
+    }
   }
 
   &__option {
     &:last-of-type {
-      margin-bottom: 0.75em; //used to the fadeout doesn't overlap the last item
+      .hashtag-autocomplete__link {
+        position: relative;
+        z-index: 1;
+      }
     }
   }