收藏
回答

Skyline渲染模式下,mask 遮罩出现黑边bug如何解决?

在webview没有这个问题,在Skyline的时候,如果屏幕尺寸是375也没问题,其他尺寸会有黑边,选择 iPhone 15 Pro Max 的时候黑边如下图:

wx

wxss 文件代码:

.svg-mask {

    width: 200rpx;

    height: 400rpx;

    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;

    mask-size: cover;

    background-color: #000;

}


wxss 文件代码:

<view class="svg-mask"></view>



最后一次编辑于  10-20
回答关注问题邀请回答
收藏

1 个回答

  • 似水流年
    似水流年
    10-21

    将SVG放置在.svg-mask::before中,尺寸比svg-mask(设置overflowHidden)大2像素试下

    10-21
    有用
    回复 1
    • Boenz
      Boenz
      10-21
      一样不行,把svg放在 .svg-mask::before 然后.svg-mask 设置 overflow: hidden 它还是有黑边,而且即使没黑边也是不太好,因为有些svg是直接干到边缘的
      10-21
      回复
登录 后发表内容