微信小程序css样式在iOS10上解析不正确

[BUG]:在用大型的圆角矩形制作水波特效的时候发现，在安卓设备上显示正常，在iOS11的设备上显示也是正常，在iOS10设备上显示为，超出屏幕部分的圆角矩形未渲染，导致角度旋转动画进行时会有一段时间为空白，甚至是在缺失一个view组件。然后无意间发现，home键返回主页再返回微信小程序时样式又显示正常，锁屏再显示也是正常。

[DEMO]

<view class='water-wave-container'>    <view class='water1'></view>    <view class='water2'></view> </view>

.water-wave-container{   position: absolute;   top: 0;   left: 0;   height: 20rem;   width: inherit;   box-sizing: border-box;   z-index: 0; } .water1{   height: 60rem;   width: 65rem;   border-radius: 45rem;   background-color: #4099ec;   z-index: 1;   position: absolute;   top: -48rem;   left: -32.5rem;   margin-left: 50%;   animation: rolling infinite 7s linear;   -webkit-animation: rolling infinite 7s linear; } .water2{   height: 100rem;   width: 100rem;   border-radius: 40rem;   background-color: #9bcbf7;   z-index: 0;   position: absolute;   top: -90rem;   left: -50rem;   margin-left: 50%;   animation: rolling infinite 10s linear;   -webkit-animation: rolling infinite 10s linear; }   @keyframes rolling{   from{     transform: rotate(0);     -webkit-transform: rotate(0);   }   to{     transform: rotate(360deg);     -webkit-transform: rotate(360deg);   } }