Skip to content

Commit

Permalink
[BUGFIX] Support CSS SVG mask on on Chrome (bootstrap-5) (#272)
Browse files Browse the repository at this point in the history
The -webkit-mask-image is a solution according to this: https://stackoverflow.com/questions/44100139/css-mask-not-working-on-chrome-webkit

Tested in Brave Browser (Version 1.37.111 Chromium: 100.0.4896.79) and Chromium (v85.0.4154.0)
  • Loading branch information
prathers authored and jonaseberle committed Apr 6, 2022
1 parent e9957ad commit 09c8152
Showing 1 changed file with 1 addition and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
content: '';
/* mask-image allows to use the background-color */
mask-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/></svg>");
-webkit-mask-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/></svg>");
background-color: white;
background-size: 1.25em;
background-repeat: no-repeat;
Expand Down

0 comments on commit 09c8152

Please sign in to comment.