ios上swiper内显示出现一部分空白的bug
发布于 6 年前 作者 yang47 481 次浏览 来自 问答

我在swiper内使用了wx:for循环实现如下图1效果：

但是很大概率会出现内容不显示的问题（如图2），按住不显示的地方又会显示出来了（如图3）。

10 回复

明白你的问题了。怀疑与 .navgator-hover 中指定的某些样式有关（有些样式会引起iOS下的重绘bug）。

目前看来，比较可疑的样式是“transition”和与透明度相关的样式。麻烦去掉这些再看看有没有问题。

麻烦试一下把.navigator-hover的background-color修改为rgb(25, 25, 25)

看起来这一行的样式和前两行不一样，有哪些区别呢？

好的。这个bug我们仔细查一下。因为是绘制方面的问题，可能需要一段时间。

第三张图的“第3章”这一行是有哪些样式控制呢？

这个问题目前判断是 iOS 系统绘制的 bug ，目前我们也没有办法解决。

通常，这个问题由一些特殊的 CSS 样式设置引起，比如特殊的 position 定位等，但也没有很明确的规律性。这里能给出的建议是不要使用 position: absolute，而是用一些其他的方法达到效果。

意思是，这样改之后就算是touch一下也显示不出来了，这样么？

麻烦提供一下相关的WXSS代码以便我们排查这个问题，谢谢。

我的问题解决了。目前看不是 absolute position 导致的，是因为 z-index: -1 导致的。

在我的案例里，.current-date:before 设置为 z-index: -1 ，然后后面的所有元素都会消失。

但我发现在设置了 .today 样式的 swipe-item 里缺不会出现空白的问题。

我遇到的问题的解决办法给 .date 默认加上 :before 样式，让 z-index 从一开始就是 -1 而不会发生变化。

// .scss


.date {

  flex: 1;
  position: relative;
 
  &:before, &:after {
    content: '';
    display: block;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
  }
 
  &:before {
    width: 54rpx;
    height: 54rpx;
    z-index: -1; // 去掉这个样式，就不会出现空白的情况。
    top: 0;
    bottom: 0;
  }
 
  &.today:before {
    background: $green-color;
  }
 
  &.current-date:before {
    background: $red-color;
  }

}


另外，iOS的版本是？

iOS 11.3

WeChat 6.6.6

基础库 1.9.92

回到顶部