Safari中隐藏的溢出不包括边界半径......有时

Question

我有一个按钮，点击时会有波纹动画。

在 Safari 中，按钮的 border-radius 不包含在 overflow: hidden 中：

所以，我做了一个 sn-p 来演示要在此处发布的问题，对于 sn-p，它起作用了：

new Vue({
  el: "#app",
  methods: {
    ripple(e) {
        let x = e.clientX - e.target.offsetLeft;
        let y = e.clientY - e.target.offsetTop;
        let ripple = document.createElement('span');

        ripple.style.left = `${x}px`;
        ripple.style.top = `${y}px`;
        document.getElementsByClassName('dk__btn')[0].appendChild(ripple);

        setTimeout(() => {
            ripple.remove();
        }, 500);
    },
  }
})

body {
  background: black;
}

.dk__navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  right: 0;
  left: 0;
  padding: 10px;
  text-align: left;
  background-color: #fcf6cd;
  color: #f6a623;
  z-index: 2;
}
.dk__navbar-top {
  top: 0;
}
.dk__navbar-bottom {
  bottom: 0;
}

.dk__btn {
  cursor: pointer;
  position: relative;
  padding: 10px 40px;
  font-size: 20px;
  font-weight: bold;
  border: none;
  border-radius: 25px;
  color: white;
  background: orange;
  box-shadow: 0px 0px 5px -2px black;
  outline: none;
  overflow: hidden;
  transition: all 0.5s;
}

.dk__btn > span {
  pointer-events: none;
  position: absolute;
  background-color: white;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  height: 15rem;
  width: 15rem;
  animation: ripple-out 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.dk__btn:hover {
  background: red;
}

@keyframes ripple-out {
  0% {
    opacity: 0;
    max-height: 0rem;
    max-width: 0rem;
  }

  50% {
    opacity: 0.3;
  }

  90% {
    opacity: 0.1;
  }

  100% {
    opacity: 0;
    max-height: 10rem;
    max-width: 10rem;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <div data-v-41458b80="" class="dk__navbar dk__navbar-top" style="background-color: black; color: white; font-size: 15px;">
      <div data-v-41458b80="" class="auth-btns"><button @click="ripple($event)" class="dk__btn" data-v-41458b80="" style="font-size: 15px; margin: 0px 10px;">Login</button>
      </div>
    </div>
  </div>
</div>

有人知道为什么吗？

澄清一下，它适用于我测试过的所有其他浏览器。

Answer 1

您需要为 safari 添加 webkit mask 才能正常工作。需要添加以下css到.dk_btn

-webkit-mask-image: radial-gradient(white, black);

new Vue({
  el: "#app",
  methods: {
    ripple(e) {
      let x = e.clientX - e.target.offsetLeft;
      let y = e.clientY - e.target.offsetTop;
      let ripple = document.createElement('span');

      ripple.style.left = `${x}px`;
      ripple.style.top = `${y}px`;
      document.getElementsByClassName('dk__btn')[0].appendChild(ripple);

      setTimeout(() => {
        ripple.remove();
      }, 500);
    },
  }
})

body {
  background: black;
}

.dk__navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  right: 0;
  left: 0;
  padding: 10px;
  text-align: left;
  background-color: #fcf6cd;
  color: #f6a623;
  z-index: 2;
}

.dk__navbar-top {
  top: 0;
}

.dk__navbar-bottom {
  bottom: 0;
}

.dk__btn {
  cursor: pointer;
  position: relative;
  padding: 10px 40px;
  font-size: 20px;
  font-weight: bold;
  border: none;
  border-radius: 25px;
  color: white;
  background: orange;
  box-shadow: 0px 0px 5px -2px black;
  outline: none;
  overflow: hidden;
  transition: all 0.5s;
  -webkit-mask-image: radial-gradient(white, black);
}

.dk__btn>span {
  pointer-events: none;
  position: absolute;
  background-color: white;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  height: 15rem;
  width: 15rem;
  animation: ripple-out 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.dk__btn:hover {
  background: red;
}

@keyframes ripple-out {
  0% {
    opacity: 0;
    max-height: 0rem;
    max-width: 0rem;
  }
  50% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
    max-height: 10rem;
    max-width: 10rem;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <div data-v-41458b80="" class="dk__navbar dk__navbar-top" style="background-color: black; color: white; font-size: 15px;">
      <div data-v-41458b80="" class="auth-btns"><button @click="ripple($event)" class="dk__btn" data-v-41458b80="" style="font-size: 15px; margin: 0px 10px;">Login</button>
      </div>
    </div>
  </div>
</div>