ボタンオーバーフローが正しく機能していませんか？

Question

明らかに私はoverflowプロパティで小さな問題があります。私は現在、抽象的なUIフレームワークuixに取り組んでいます。問題自体は、ユーザーがボタンをクリックするたびに生成される波の効果に関連しています。 Github Pagesページをご覧になり、border-radiusを3pxよりも多く設定してみてください。気づいたように、波がボタン要素の端に当たったらすぐにoverflowは機能しません。

完全なソースコードはProject Pageにあります。

次のコードを使用して波形動作を作成しています。

.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

は、.btnにz-index: 1;を追加し、この問題を修正します。