Question

显然我对overflow属性有一个小问题。我目前正在开发一个名为uix的抽象UI框架。问题本身与用户单击按钮时产生的波浪效果有关。请查看Github Pages页面并尝试将border-radius设置为高于3px的金额。正如您可能已经注意到，只要wave会碰到按钮元素的边缘，overflow就不会起作用。

完整的源代码可在Project Page获得。

我使用以下代码创建wave行为。

.btn {
  display: inline-block;
  min-width: $button-min-width;
  border-radius: $button-border-radius;
  overflow: hidden;
  cursor: pointer;
  ...
}

.wave {
  display: none;
  position: absolute;
  border-radius: 50%;
  padding: 50% 0;
  height: auto;
  width: 100%;
  ...

  &.wave-in {      
    display: inline-block;
    animation: $wave-animation;
    ...

uix.element(".btn").each(function(el) {
  el.onmousedown = function(e) {

    uix.element(this).addClass("waving");

    var rect = this.getBoundingClientRect();
    // Create child span element for wave effect:
    var span = document.createElement("span");
    span.className = "wave";
    Object.assign(span.style, {
      "left": (e.clientX - rect.left - (rect.width / 2)) + "px",
      "top":  (e.clientY - rect.top - (rect.width / 2)) + "px"
    });
    this.appendChild(span);

    // Add button wave animation:
    uix.element(span).addClass("wave-in");

    // Remove span after animation ends:
    setTimeout(function() {
      uix.element(this).removeClass("waving");
      span.remove();
      delete span;
    }, 800);

  }
});

Answer 1

查看此答案：https://stackoverflow.com/a/35251771/2565294

将z-index: 1;添加到.btn，如答案所示，这可以解决问题。

按钮溢出不正常？

1 个答案: