Border-radius 和 overflow:hidden（离子应用程序）

Question

Ionic 应用程序中的 border-radius 和 overflow:hidden 存在一些问题。我有父级 .dtc-zero-eye 和 .dtc-zero-iris 子级。

.dtc-zero-eye {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 8.5vh;
  position: relative;
  z-index: 9;
  border: 8px solid #DCDDE1;
  background-color: #fff;
  width: 20vh;
  height: 20vh;
  border-radius: 5% 125% 5% 125%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  overflow: hidden;

  .dtc-zero-iris {
    width: 12vh;
    height: 12vh;
    background-color: #2D9AFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

在 chrome（调试模式）下尝试一切正常。

但是当在 ios 设备上尝试测试草图时 - 有这些 =>

所以当我关闭 border-radius 时 - overflow 工作正常。当然尝试了一些像 "mask-image" 这样的修复，但正如预期的那样，它不起作用。

我真的很期待你们的回答，抱歉我的英语不好。

已更新，这里是 jsFiddle

Answer 1

也许iOS使用边框外侧来剪辑内容？尝试关闭边框，看看会发生什么。

Border-radius 和 overflow:hidden（离子应用程序）

Border-radius and overflow:hidden (ionic app)

css

overflow

ios

ionic-framework