css - 动画时边界半径消失

Question

我正在尝试使用 CSS 模拟某种可以在 iOS 中看到的菜单。它在 ul 中有菜单项，单击每个菜单项会使菜单滑过以显示页面。

但是，每当菜单滑动时(当它主动滑动时)， Angular 就会变成方形。动画结束后，它们又恢复为圆形。

这是一个 jsfiddle删除了很多多余的样式代码。如果您单击列表中的任一标题，您会看到 Angular 变成正方形，就像内容正在播放一样。当您按下后退按钮时，可以再次看到这一点。

我在最新的 Chrome 和 Safari 中看到了这个问题，但在 Firefox 中没有。

Answer 1

你可以给#modal-content 一个 z-index 为 1(假设它下面没有任何东西的 z-index 大于 1)并且它应该在过渡期间保持 border-radius。

.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-content 在元素堆栈中更高，当转换发生时，.modal-content 的子元素移动到“下方”.modal-content。所以 .modal-contents 边框不会被过渡的 child 遮挡。