邊界半徑消失，而動畫

Question

我想模擬某種菜單，可以在iOS中看到與CSS。它有一個ul菜單項，並點擊每一個菜單滑動顯示頁面。

但是，每當菜單滑動時（雖然它是積極滑動）角落轉向正方形。然後他們在動畫完成後回到四捨五入狀態。

這是一個jsfiddle與我的多餘的造型代碼刪除了很多。如果您點擊列表中的任意一個標題，就會發現角落正好像內容動畫一樣旋轉。當您按下後退按鈕時，可以再次看到。

我在最新的Chrome和Safari中看到此問題，但在Firefox中看不到此問題。

Answer 1

你可以給＃modal-content指定一個z-index（假設它下面沒有z-index大於1），它應該在轉換期間保持邊界半徑。

.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內容的子元素都移動「下面」 .modal的內容。所以。模態內容邊界不會被過渡的孩子所遮擋。