1

http://hisidi.kr/2023/100/

In this website, I masked circular shaped space at the top and bottom of the screen by using mask and mask-composite.

But in Safari 14, it doesn't work properly(maybe because mask-composite is not supported in this version?) Is there any way to make this shape function also in Safari 14?

.hundred_top {
    pointer-events: none;
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    height: 100.6%;
    background-color: black;
    -webkit-mask:
        radial-gradient(circle at 25% bottom, transparent 31.6%, black 31.6%),
        radial-gradient(circle at 75% bottom, transparent 31.6%, black 31.6%),
        radial-gradient(black, black);
    mask:
        radial-gradient(circle at 25% bottom, transparent 31.6%, black 31.6%),
        radial-gradient(circle at 75% bottom, transparent 31.6%, black 31.6%),
        radial-gradient(black, black);
    mask-composite: exclude;
}

.hundred_bottom {
    pointer-events: none;
    position: relative;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100.6%;
    background-color: black;
    -webkit-mask:
        radial-gradient(circle at 25% top, transparent 31.6%, black 31.6%),
        radial-gradient(circle at 75% top, transparent 31.6%, black 31.6%),
        radial-gradient(black, black);
    mask:
        radial-gradient(circle at 25% top, transparent 31.6%, black 31.6%),
        radial-gradient(circle at 75% top, transparent 31.6%, black 31.6%),
        radial-gradient(black, black);
    mask-composite: exclude;
}

@supports (-webkit-mask-composite: destination-in) and (not (mask-composite: exclude)) {
    .hundred_top,
    .hundred_bottom {
        -webkit-mask-composite: destination-in;
    }
}

I added @supports code for previous version of Safari and Chrome. It worked in Safari 15, but not in 14 versions.

midnight-coding
  • 2,857
  • 2
  • 17
  • 27
penguin
  • 11
  • 1
  • I always find [caniuse.com](https://caniuse.com/?search=mask-composite) a useful resource for this. Without any knowledge or testing: Perhaps you need to add `-webkit-mask-composite: exclude;` alongside `mask-composite: exclude;`? That's just a wild guess... – KIKO Software Jul 29 '23 at 10:31

1 Answers1

0

Do it without mask-composite

.box {
  width: 400px;
  aspect-ratio: 4;
  background-color: black;
  margin: 40px;
}
.top {
  -webkit-mask:
     radial-gradient(50% 100% at bottom,#0000 99%,#000)
     0/50% 100%;
}

.bottom {
  -webkit-mask:
     radial-gradient(50% 100% at top   ,#0000 99%,#000)
     0/50% 100%;
}
<div class="box top"></div>
<div class="box bottom"></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Wow, thank you for your answer! I didn't know simplifying gradient like this could be a solution. – penguin Jul 29 '23 at 14:43