收藏
回答

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

问题模块 框架类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小程序 iOS 10.3.3 iPhone7 6.6.1

[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);
  }
}


最后一次编辑于  2018-01-28  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • ChangeHow
    ChangeHow
    2018-01-29

    没有人来回答一下吗

    2018-01-29
    赞同
    回复
  • dddd
    dddd
    2018-01-29

    那就不用水波纹

    2018-01-29
    赞同
    回复