Question

我试图模仿可以在iOS中使用CSS看到的某种菜单。它包含<form th:object="${createForm}"> <div th:replace="fragments/input :: input('field', *{field})" /> </form>中的菜单项，点击每个菜单项会使菜单滑过以显示该页面。

然而，每当菜单滑动时（当它主动滑动时），角落变成方形。然后他们在动画结束后回到圆角。

这里有一个jsfiddle，其中包含了许多多余的样式代码。如果单击列表中的任一标题，您将看到角落在内容为动画时变为方形。按后退按钮时可以再次看到这一点。

我在最新的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的子元素正在移动＆＃34;在＆＃34;下面。 .modal内容。因此，.modal-contents边框不会被过渡的孩子遮挡。

边框半径在动画时消失

1 个答案: