サファリのボーダー半径と大粒のスプレッドドロップシャドウ

Question

Safari（バージョン11.0（12604.1.38.1.7）、ボーダー半径、大きな広がりドロップシャドウ）で問題が発生しました。この問題はChromeでは発生しません、FF、またはエッジ。

大きなドロップシャドウ理由は、要素が表示され、ドロップシャドウは、画面全体を覆う半透明である効果のようなウィンドウを達成することである。いくつかのトラブルシューティング後

Safariではドロップシャドウがうまく動作するが、スプレッドが非常に大きい場合（ここのような）、コンテナのボーダー半径がすべて一致する場合は決まらない。コーナーボーダー半径を1ピクセル違うように調整すると、問題は解決するとドロップシャーダウスプレッドは、私が望むサイズで動作します。

Here's a quick and dirty CodePen demonstrating the issue.
ボタンは、等価ボーダー半径クラスと等しくないボーダー半径クラスをトグルします。しかし、ボックスシャドーサイズを自由に調整して、ある点までうまくいくことに気をつけてください（2039pxの作品、2040pxはありません。 。

私はここでもCodePenからコードを貼り付けなければならないと思います。

HTML

<div class='wrapper'> 
    <div id='box-shadow-container' class="equal-border-radius"> 
    <div id='box-shadow-fun'> 
    What's going on here? <br/><br/> 
    <button id='toggle-radius-class'> Swap Border Radius Class</button> 
    </div> 
    </div> 
</div> 

CSS

body { 
    display: flex; 
    flex-direction: column; 
    min-height: 400px; 
} 

.wrapper { 
    flex-grow: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

#box-shadow-fun { 
    padding: 5px; 
} 

#box-shadow-container { 
    border: 1px solid #CCC; 
    box-shadow: 0 0 0 5000px black; 
} 

.one-different-border-radius { 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 4px; 
} 

.equal-border-radius { 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
} 

誰もがここでの問題を知っていますか？私は1つのコーナーでピクセルの半径が違うように暮らすことができますが、将来バラバラに見えるバグ修正を理解していないのは好きではありませんし、何が起こっているのかまだ分かりません。

Answer 1

不均等なボーダー半径で何が起こっているのか分かりませんが、ボーダー半径が大きすぎるとSafariは非常に大きなボックスシャドウを処理しないように見えます。あなたも（影の非常に極端以外では目立ってはならない）小さなぼかし半径を設定する場合は、作業を行います。

#box-shadow-container { 
    box-shadow: 0 0 500px 5000px black; 
        ^^^^^ 
} 

しかしこれは、Firefoxを中断します。 Safariブラウザを検出し、Safariでのみこのスタイルを適用する必要があります。

ぼかしの半径と広がりの値で周囲を再生し、必要な最小サイズで動作するものを入手します。

Answer 2

私は、問題の原因を知りませんが、あなたはcalc使用して、さまざまな境界半径の1にすることなくそれを修正することができます（非常に小さいぼかし値ではなく）この作品の確認

.thing-with-box-shadow { 
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); 
    border-radius: 50%; 

    // makes the box shadow appear on Safari 
    border-bottom-right-radius: calc(50% + 0px); 
}