アニメーション中にborder-radiusが消える

Question

CSSを使ってiOSで見ることのできる特定の種類のメニューをエミュレートしようとしています。それはulのメニュー項目を持っていて、それぞれをクリックすると、ページが表示されます。

ただし、メニューがスライドしている間は（がアクティブになっている間に、が滑っています）、コーナーが四角く回転します。その後、アニメーションが終了した後で丸くなるように戻ります。

jsfiddleは、私の余分なスタイリングコードを大量にカットしたものです。リスト内のいずれかのタイトルをクリックすると、コンテンツがアニメーション化されているようにコーナーが四角に変わることがわかります。これは、戻るボタンを押すと再び見ることができます。

最新のChromeとSafariではこの問題が確認されましたが、Firefoxでは認識されません。

Answer 1

＃modal-contentには1のz-インデックスを付けることができます（z-indexが1より大きいと仮定しない場合）、遷移中にボーダー半径を保持する必要があります。遷移が.modalコンテンツの子要素を発生した場合、要素スタック内.modal含量が高いことで

.modal-content { 
    position:absolute; 
    bottom:0;top:0;left:0;right:0; 
    margin: 10vh; 
    border: 1px solid #ccc; 
    border-radius: 15px; 
    overflow:hidden; 
    z-index: 1; 
} 

は「下」.modalコンテンツを移動しています。ですから、.modal-contentsの境界線は、移行する子どもによって隠されません。