Fix mask-image property

Needed by chrome

3 files changed, 9 insertions, 2 deletions

diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 45cee3e77..1738f486d 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -47,6 +47,7 @@ $context-menu-width: 350px;
       @each $icon in $icons {
         &[class$="-#{$icon}"] {
           mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
+          -webkit-mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
         }
       }
 
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 8fe2e054d..c010f7297 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -346,6 +346,8 @@ body {
         &.icon-next,
         &.icon-previous {
           mask-image: url('#{$assets-path}/player/images/next.svg');
+          -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
+
           background-color: #fff;
           mask-size: cover;
           width: 11px;
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index 8558fc837..3279bd263 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -40,10 +40,12 @@ $playlist-menu-width: 350px;
     }
 
     .cross {
+      mask-image: url('#{$assets-path}/images/feather/x.svg');
+      -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
+
       cursor: pointer;
       width: 20px;
       height: 20px;
-      mask-image: url('#{$assets-path}/images/feather/x.svg');
       background-color: #fff;
       mask-size: cover;
     }
@@ -85,9 +87,11 @@ $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');
+
   width: 22px;
   height: 22px;
-  mask-image: url('#{$assets-path}/images/feather/list.svg');
   background-color: #fff;
   mask-size: cover;
   margin-bottom: 3px;