溢出滚动：触摸中断溢出：隐藏在Mobile Safari中的子元素上

Question

我正在尝试绘制一个半圆并使用CSS旋转它。像这样;

要设置div.circle的样式，我使用border-radius：50％;然后我把它包裹在溢出中：隐藏; div.mask是圆的宽度的一半，因此隐藏了圆的一半。然后我使用transform：rotate（45deg）来旋转div.mask。这适用于我测试过的所有浏览器。

<div class="mask">
  <div class="circle"></div>
</div>

.mask {
  outline: 1em solid red;
  overflow: hidden;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.circle {
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: blue;
  width: 200%;
  height: 100%;
}

但是当我将这个元素放在一个具有溢出滚动的块中时：触摸;和溢出：滚动;并在iOS7上的Mobile Safari上查看它半圈成为一个完整的圆圈，因为溢出：隐藏;在div.mask上似乎不再有效。

.scroller {
  border: 1em solid green;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

我该如何解决这个问题？

Here's a live example