收藏
回答

border-radius在ios失效问题?

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 微信iOS客户端 7.0.18 2.14.0

描述:battery-copy类设置border-radius,在开发工具中查看正常显示,但是在ios预览和体验版显示却不生效,下图是ios显示的效果。将橙色块高度调至0时,底部的圆角也变成直角了。安卓未测试。

尝试:在battery-copy类中添加过以下代码,不生效。

backface-visibility: hidden;
transform: translate3d(0, 0, 0);


在此请求大佬们帮忙看一下,代码片段:https://developers.weixin.qq.com/s/lgvHxDmn7Xlq


回答关注问题邀请回答
收藏

4 个回答

  • 风子
    风子
    2021-07-23

    出现此问题的原因是因为ios手机会在transform的时候导致border-radius失效

    解决方法:在使用动画效果带transform的元素的上一级div元素的css加上下面语句:

    -webkit-transform:rotate(0deg);

    2021-07-23
    有用 4
    回复 2
    • @
      @
      2021-08-26
      感谢
      2021-08-26
      1
      回复
    • 艾欧泽亚白魔法师
      艾欧泽亚白魔法师
      2022-01-07
      感谢大佬!!
      2022-01-07
      回复
  • 莫葙依
    莫葙依
    2022-04-08

    2022.4.8问题还在!

    2022-04-08
    有用
    回复 2
    • 冷枫
      冷枫
      2023-02-13
      父级加
         -webkit-backface-visibility: hidden;
         -webkit-transform: translate3d(0, 0, 0);
      2023-02-13
      1
      回复
    • Las_estrellas
      Las_estrellas
      2023-06-06回复冷枫
      有用!
      2023-06-06
      回复
  • Cjiang
    Cjiang
    2020-11-06

    你好,问题已复现,已反馈。

    2020-11-06
    有用
    回复 7
    • Yin熊🐻.
      Yin熊🐻.
      2020-12-09
      请问解决好了吗?
      2020-12-09
      回复
    • Cjiang
      Cjiang
      2020-12-09回复Yin熊🐻.
      问题已反馈,有进展帖子同步。
      2020-12-09
      回复
    • Yin熊🐻.
      Yin熊🐻.
      2021-03-12回复Cjiang
      三个月过去了
      2021-03-12
      回复
    • Yin熊🐻.
      Yin熊🐻.
      2021-03-17回复暗の月
      难搞
      2021-03-17
      回复
    • 〆 、浮世三千
      〆 、浮世三千
      2021-05-27回复Yin熊🐻.
      我这边也遇到了同样的问题,同样的代码在ios上圆角不能实现,请问有解决方案没
      2021-05-27
      回复
    查看更多(2)
  • Yin熊🐻.
    Yin熊🐻.
    2020-11-06

    官方能看看吗?

    2020-11-06
    有用
    回复
登录 后发表内容
问题标签