收藏
回答

border-radius 生成的圆角图片显示时会闪一下

问题模块
API和组件

iOS更新微信版本到 6.5.23 后,打开3月发发布的线上小程序,圆角图片会先变方,再变圆闪一下。


代码如下:

```

dom:

view.user-item-image > image


css:

.user-item-image {

    width: 55px;

    height: 55px;

    border-radius: 50%;

    overflow: hidden;

    margin-bottom: 5px;

}


.user-item-image image {

    width: 100%;

    height: 100%;

}

```


修改 border-radius 为 999px 也不行。


图片列表是放在 scroll-view 中的,页面是用 flex 部局的。

更新前没问题,更新后才这样。

求解

最后一次编辑于  2017-12-08
回答关注问题邀请回答
收藏

6 个回答

  • Clark
    Clark
    2018-08-07

    image元素的css上加上will-change: transform;试试

    2018-08-07
    赞同 1
    回复 3
    • 风车田
      风车田
      2018-08-18

      测试可以解决,在加了border-radius样式的元素上增加这个样式测试是可以的。

      现在iOS10.3,微信6.6.7。

      2018-08-18
      回复
    • 🌙
      🌙
      2018-08-21回复风车田

      为啥我不行==  也是ios的    一开始进去是圆角的 然后会立马闪一下变成直角再变成圆角

      2018-08-21
      回复
    • 风车田
      风车田
      2018-08-21回复🌙

      我是加在image元素的父元素上的。加上之后的效果是图片渲染变有了一点延迟,但渲染出来时就是带圆角的,不会闪了。

      加这个样式的原理我倒不是很明白。

      2018-08-21
      回复
  • 空蓝
    空蓝
    2018-07-23

    请问,问题解决了吗?我也遇到了这问题,基本ios都会出现这个问题,安卓反而很少见

    2018-07-23
    赞同
    回复 1
    • 风车田
      风车田
      2018-07-23

      依然有,没有解决。

      我已经尝试了hack的方式实现圆角效果,但不理想。

      我发现这个问题时是在更新微信后出现的,所以还是用正确的方式使用,等待修复吧。

      2018-07-23
      回复
  • 子龙
    子龙
    2018-03-21

    同样,系统信息如下:


    2018-03-21
    赞同
    回复
  • 风车田
    风车田
    2018-01-03

    另外,由 showModal 方法生成的浮层中,提示消息文本区域是个文本框,内容可编辑。(虽然没有什么影响

    2018-01-03
    赞同
    回复
  • 彦明
    彦明
    2017-12-27

    我也遇到这个问题, 官方也没解释, 看起来好怪

    2017-12-27
    赞同
    回复
  • 风车田
    风车田
    2017-12-08

    android 6.5.22 也有同样的问题

    2017-12-08
    赞同
    回复