公告列表
公告列表
收藏
回答

图片设置圆角 会先闪一下 才变成圆图

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug image 客户端 6.6.6 1.9.91

图片设置圆角  会先闪一下 才变成圆图

border-radius:50%;
回答关注问题邀请回答
收藏

9 个回答

  • 黄思程
    黄思程
    2018-05-16

    尝试加一个 will-change: transform 看看

    2018-05-16
    有用 3
    回复 1
    • 🐠糖醋鱼
      🐠糖醋鱼
      2018-10-20

      没有效果，这个问题我见好多开发者反馈过，但是貌似一直没有解决。好影响用户体验

      2018-10-20
      赞
      回复
  • 卢霄霄
    卢霄霄
    2018-05-11

    如果是在一般的view里显示，可以把图片放在一个和图等大小的view里，给view也设上border-radius，而且overflow:hidden。如果是scroll-view里，就不知道怎么操作了

    2018-05-11
    有用 1
    回复
  • 吕振雄
    吕振雄
    2018-05-17

    你的办法不错,很好,在没有判断的情况下,你的这个方法已经是最佳的实践了,如果存在判断的话,例如当后端返回的字段室友图片地址的话就显示图片地址的图片,如果返回的图片地址为空的话就显示默认图片这样子的话,浏览器会先判断是否图片地址是否false,之后在根据判断的结果渲染页面,会出现一瞬间的空白或者闪一下

    2018-05-17
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-05-11

    麻烦给个相关的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），我们定位下问题

    2018-05-11
    有用
    回复 3
    • 追小命
      追小命
      2018-05-12
      真的不需要代码片段 <image style="border-radius: 50%;" src= ".............."/> 就可以直接重现，无论是iOS还是安卓都有不同程度的闪烁。并且这个闪烁不止局限于小程序，在其他webview渲染的服务和网页里也时常可以看到。我的印象2017年年初还没这个问题，到了年终之后变得很明显，我们不得不调整代码，因为满屏logo我们都用了圆角。
      2018-05-12
      赞
      回复
    • 追小命
      追小命
      2018-05-12
      既然要片段好的：wechatide://minicode/mvl7Glm56CZP 再来一个iphone7+的屏幕录像视频：http://cdn.raceonhills.com/feed/shabu2018/1fce78abbcde78de2a14b048a179597c1526071834194.mp4
      2018-05-12
      赞
      回复
    • 吕振雄
      吕振雄
      2018-05-17
      你的办法不错,很好,在没有判断的情况下,你的这个方法已经是最佳的实践了,如果存在判断的话,例如当后端返回的字段室友图片地址的话就显示图片地址的图片,如果返回的图片地址为空的话就显示默认图片这样子的话,浏览器会先判断是否图片地址是否false,之后在根据判断的结果渲染页面,会出现一瞬间的空白或者闪一下
      2018-05-17
      赞
      回复
  • 旋
    旋
    2018-05-11

    华为nova青春版   微信版本 6.6.6

    2018-05-11
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-05-11

    麻烦提供一下出现问题的机型和微信版本，并且给个相关的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），我们定位下问题

    2018-05-11
    有用
    回复 1
    • 追小命
      追小命
      2018-05-12
      相关其他用户反馈： https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000842d5b38208e17e761455c54c00&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000842d5b38208e17e761455c54c00&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=0000cc74b14090d04c360e4b656c00&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000280015280a0882d2643e9f5bc00&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=25ccf1838754886f1e53c18f1198b865&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=3edb1676498d5124e8dfd4bd2ad6bc5e&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=b1ab186aed9b9f7a4d6c7c98f3f6f537&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=1e091ecb820e50c683b6d0b655a1e390&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=1e091ecb820e50c683b6d0b655a1e390&highline=border-radius
      2018-05-12
      赞
      回复
  • 追小命
    追小命
    2018-05-11

    这个问题困扰我们很久了，因为图标多这个特别烦人。但发现微信里很多情况都存在这个问题，不单单是小程序。


    我的方法是直接在view里设置background image，就没这个问题了。


    <view style="background-image: url('{{item.cover_image}}');" class="race-logo-small backimg"></view>


    但的确还是希望官方可以注意下这个问题。虽然可能已经是整个微信内置webview的问题了

    2018-05-11
    有用
    回复 1
    • 吕振雄
      吕振雄
      2018-05-17
      你的办法不错,很好,在没有判断的情况下,你的这个方法已经是最佳的实践了,如果存在判断的话,例如当后端返回的字段室友图片地址的话就显示图片地址的图片,如果返回的图片地址为空的话就显示默认图片这样子的话,浏览器会先判断是否图片地址是否false,之后在根据判断的结果渲染页面,会出现一瞬间的空白或者闪一下
      2018-05-17
      赞
      回复
  • 旋
    旋
    2018-05-11

    有的机子闪的比较快，我这个华为nava的，很明显

    2018-05-11
    有用
    回复
  • 旋
    旋
    2018-05-11

    我在外面也套了一个view，这样设置过了，可是还是会闪一下


    2018-05-11
    有用
    回复
请 登录 后发表内容
相关问题
相关文档