border-radius 动画时消失

Question

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

但是，每当菜单滑动时（当它主动滑动时），角就会变成方形。然后他们在动画完成后返回到圆形。

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

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

Answer 1

你可以给#modal-content 一个 z-index 的 1（假设它下面没有一个 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-content 在元素堆栈中更高，当转换发生时 .modal-content 的 child 个元素正在移动 "underneath" .modal-content .所以 .modal-contents 边界不会被过渡 child.

遮挡

border-radius 动画时消失

border-radius disappears while animating

css

webkit