边界半径和溢出：隐藏（离子应用程序）

Question

有一些border-radius和overflow的问题：隐藏在Ionic app中。 我得到了父母.dtc-zero-eye和.dtc-zero-iris child。

.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设备上尝试测试草图时 - 请使用这些=＆gt;

所以当我关闭边框半径时 - 溢出工作正常。 当然尝试了一些修复，例如＆＃34; mask-image＆＃34;但正如预期的那样，它不起作用。

我真的在等你的答案，对不起我的坏英语。

已更新，此处为jsFiddle

Answer 1

Maybe iOS uses the outside of the border to clip the contents? Try turning off the border and seeing what happens.