ボーダー半径とオーバーフロー：非表示（イオンアプリ）

Question

ボーダー半径とオーバーフローに関するいくつかの問題があります。 親の.dtc-zero-eyeと.dtc-zero-irisの子を得ました。

.dtc-zero-eye { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    top: 8.5vh; 
    position: relative; 
    z-index: 9; 
    border: 8px solid #DCDDE1; 
    background-color: #fff; 
    width: 20vh; 
    height: 20vh; 
    border-radius: 5% 125% 5% 125%; 
    -webkit-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    overflow: hidden; 

    .dtc-zero-iris { 
    width: 12vh; 
    height: 12vh; 
    background-color: #2D9AFF; 
    border-radius: 50%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 

クロム（デバッグモード）で試してみるとすばらしいことになります。

しかし、iOSデバイス上のテストスケッチにおける試みは - オーバーフロー右のように動作します - 私は電源を入れたときにそうオフ国境半径はこれら=>

を持っています。 もちろん、 "mask-image"のようないくつかの修正を試みましたが、期待通りに動作しません。

私は本当にあなたの答えを待っています、そして、私の悪い英語のために申し訳ありません。

、ここで更新

はjsFiddle

Answer 1

たぶん、iOSのは、内容をクリップする境界線の外側を使用していますか？ボーダーをオフにして何が起こるかを見てみましょう。