Fix player icons on chrome

4 files changed, 9 insertions, 4 deletions

diff --git a/client/.stylelintrc.json b/client/.stylelintrc.json
index 6a322da62..3b6a465e1 100644
--- a/client/.stylelintrc.json
+++ b/client/.stylelintrc.json
@@ -28,7 +28,7 @@
     "property-no-vendor-prefix": [
       true,
       {
-        "ignoreProperties": [ "mask-image" ]
+        "ignoreProperties": [ "mask-image", "mask-size" ]
       }
     ]
   }
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 5548e2712..c183d24f4 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -44,6 +44,8 @@ $context-menu-width: 350px;
       width: 14px;
       height: 14px;
       background-color: #fff;
+
+      -webkit-mask-size: cover;
       mask-size: cover;
 
       @each $icon in $icons {
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 7fe4ac193..96d752699 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -354,9 +354,10 @@ body {
         &.icon-previous {
           mask-image: url('#{$assets-path}/player/images/next.svg');
           -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
+          mask-size: cover;
+          -webkit-mask-size: cover;
 
           background-color: #fff;
-          mask-size: cover;
           width: 11px;
           height: 11px;
           margin-top: -2px;
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index f7e67ba16..e1999709e 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -46,12 +46,13 @@ $playlist-menu-width: 350px;
     .cross {
       mask-image: url('#{$assets-path}/images/feather/x.svg');
       -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
+      mask-size: cover;
+      -webkit-mask-size: cover;
 
       cursor: pointer;
       width: 20px;
       height: 20px;
       background-color: #fff;
-      mask-size: cover;
     }
   }
 }
@@ -93,11 +94,12 @@ $playlist-menu-width: 350px;
 .vjs-playlist-icon {
   mask-image: url('#{$assets-path}/images/feather/list.svg');
   -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg');
+  mask-size: cover;
+  -webkit-mask-size: cover;
 
   width: 22px;
   height: 22px;
   background-color: #fff;
-  mask-size: cover;
   margin-bottom: 3px;
 }