返回

IOS下box-shadow的诡异bug的修复

前端

def fix_shadow_bug(view, shadow_extend_size):
    """修复IOS下box-shadow的诡异bug。

    Args:
        view: 需要修复阴影的视图。
        shadow_extend_size: 阴影的拓展尺寸,数值越大,阴影越扩散。

    """
    view.layer.shadowOffset = CGSizeMake(0, 0)
    view.layer.shadowOpacity = 1
    view.layer.shadowRadius = 0
    view.layer.shadowColor = UIColor.blackColor().CGColor
    view.layer.shadowPath = UIBezierPath(rect: view.bounds).CGPath
    view.layer.masksToBounds = False

    # 关键的一步,设置阴影的拓展尺寸。
    view.layer.shadowPath = UIBezierPath(roundedRect: view.bounds,
                                         cornerRadius: view.layer.cornerRadius,
                                         byTransformingWith: CGAffineTransform(translationX: 0, y: -shadow_extend_size))
                                         .CGPath

好的,让我们来写一篇关于在IOS中修复box-shadow的诡异bug的文章。

在IOS下,box-shadow的渲染存在一个诡异的bug,导致阴影无法正常显示。这个bug在iOS 11.4.1上被首次发现,影响了iPhone 8、iPhone 8 Plus、iPhone X、iPhone XR、iPhone XS和iPhone XS Max等机型。

如何修复

要修复这个bug,需要设置阴影的拓展尺寸。具体步骤如下:

  1. 将阴影偏移设置为(0, 0)
  2. 将阴影透明度设置为1
  3. 将阴影半径设置为0
  4. 将阴影颜色设置为黑色。
  5. 将阴影路径设置为视图的路径。
  6. masksToBounds属性设置为False
  7. 将阴影的拓展尺寸设置为一个非常大的值,例如100

修复前后的对比图

修复前后,阴影的显示效果如下:

修复前后对比图

总结

通过设置阴影的拓展尺寸,可以修复IOS下box-shadow的诡异bug。这个修复方法简单有效,可以解决阴影无法正常显示的问题。