我想通过CSS的关键帧动画写一个扇形图转动的动画：

使用的CSS代码如下：

.pie {
  margin-top: 460rpx;
  width: 160rpx; height: 160rpx;
  border-radius: 80rpx;
  background: #d8eeff;
  background-image: linear-gradient(to right, transparent 50%, #22E228 0);
  overflow: hidden;
}
.color-mask {
  background-color: red;
  margin-left: 50%;
  height: 100%;
  overflow: hidden;
  transform-origin: left;
  animation: spin 3s linear infinite;
}

[@keyframes](/user/keyframes) spin {
  to { transform: rotate(.5turn); }
}

<view class="pie">
  <view class="color-mask" />
  <!--<view class="pie-mask" />-->
</view>

然后这段代码在模拟器上运行的很好。但是在IOS真机上，color-mask的形状变的非常奇怪：

如果不使用动画的话，就不会出现这些边角，请问这是什么原因呢？