From f116407941b7044d8d6937b8f1fd31525edf302e Mon Sep 17 00:00:00 2001
From: Hakjoon Sim <trainto@gmail.com>
Date: Fri, 4 Nov 2022 13:01:17 +0900
Subject: [PATCH] fix: chrome needs vendor prefix(-webkit-) for mask (#4056)

---
 web/assets/css/transmission-app.scss | 7 +++++++
 web/stylelint.config.js              | 1 +
 2 files changed, 8 insertions(+)

diff --git a/web/assets/css/transmission-app.scss b/web/assets/css/transmission-app.scss
index 751e50d39..f4a6d8107 100644
--- a/web/assets/css/transmission-app.scss
+++ b/web/assets/css/transmission-app.scss
@@ -369,13 +369,19 @@ $video-image: '../img/film.svg';
 @mixin mime-icon($mime-icon) {
   // background-image: url($mime-icon);
   background-color: var(--color-fg-primary);
+  -webkit-mask-image: url($mime-icon);
   mask-image: url($mime-icon);
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
 
   &[data-icon-multifile='true'] {
+    -webkit-mask-image: url($mime-icon), url($folder-image);
     mask-image: url($mime-icon), url($folder-image);
+    -webkit-mask-position: top left, bottom right;
     mask-position: top left, bottom right;
+    -webkit-mask-repeat: no-repeat, no-repeat;
     mask-repeat: no-repeat, no-repeat;
+    -webkit-mask-size: 16px, 16px;
     mask-size: 16px, 16px;
   }
 }
@@ -437,6 +443,7 @@ $video-image: '../img/film.svg';
       .icon {
         flex-shrink: 0;
         height: $icon-size;
+        -webkit-mask-size: $icon-size, $icon-size-num * 0.5px;
         mask-size: $icon-size, $icon-size-num * 0.5px;
         width: $icon-size;
 
diff --git a/web/stylelint.config.js b/web/stylelint.config.js
index 4d319a59e..edf6abf7a 100644
--- a/web/stylelint.config.js
+++ b/web/stylelint.config.js
@@ -27,6 +27,7 @@ module.exports = {
     "primer/no-undefined-vars": true,
     "primer/no-unused-vars": true,
     "property-no-unknown": true,
+    "property-no-vendor-prefix": null,
     "scss/at-rule-no-unknown": true,
     "selector-attribute-quotes": null,
     "selector-max-compound-selectors": null,