0

CSS works fine on windows but not on Safari. I've tried using RGBA in replace of hexcode it still not showing.

Here's my CSS code

.gradient-border-mask {
  position: relative;
  padding: 15px 20px;
}

.gradient-border-mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 0 300px 0;
  border-bottom: 20px solid transparent;
  background: linear-gradient(to left,#F31D7D,#480413) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

@media only screen and (max-width: 600px) {
.gradient-border-mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 0 110px 0;
  border-bottom: 20px solid transparent;
  background: linear-gradient(to left,#F31D7D,#480413) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
}

Greatly appreciated. Thanks in advance!

Tako
  • 1
  • Did you try adding `mask` without the `-webkit` prefix? According to [caniuse](https://caniuse.com/?search=-webkit-mask) Safari supports it without prefixes – Christian Vincenzo Traina May 16 '22 at 08:39
  • xor instead of destination-out – Temani Afif May 16 '22 at 08:42
  • The linked question just says "I recommend using the CSS mask method since the support is pretty good now", which is what OP is using. What's happening to StackOverflow? It's maybe the fifth reopen vote that I cast in the past few days – Christian Vincenzo Traina May 16 '22 at 08:45
  • @CristianTraìna you need to read the *full* duplicate, don't stop at the first sentence. Check the mask method used there and the one used here and spot the difference. I also commented here to explain the difference – Temani Afif May 16 '22 at 08:53
  • 2
    @CristianTraìna *What's happening to StackOverflow?* --> people only read 10% of the information and start complaining ... – Temani Afif May 16 '22 at 08:54

0 Answers0