微信小程序css样式在iOS10上解析不正确
发布于 5 年前 作者 chou 18684 次浏览 来自 问答

[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](/user/keyframes) rolling{
  from{
    transform: rotate(0);
    -webkit-transform: rotate(0);
  }
  to{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
2 回复

那就不用水波纹

没有人来回答一下吗

回到顶部