.icon{
display: inline-block;
vertical-align: middle;
font-size: 8px;
color: #42b983;
width: 5px;
height: 5px;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
background-color: currentColor;
-webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D…1%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D…1%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
}
JackJiang
- 发布：2023-04-24 12:20
- 更新：2023-04-24 15:28
- 阅读：772
产品分类： uniapp/H5
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： macos 12.6
HBuilderX类型： 正式
HBuilderX版本号： 3.7.9
浏览器平台： Chrome
浏览器版本： HBuilderX的内置浏览器
项目创建方式： HBuilderX
示例代码：
操作步骤：
只要scroll-view中内容超出一屏，出现滚动条时，就会出现这个问题！
只要scroll-view中内容超出一屏，出现滚动条时，就会出现这个问题！
预期结果：
mask-image属性正常工作，图标能正常显示。
mask-image属性正常工作，图标能正常显示。
实际结果：
mask-image属性不能正常工作，图标能不正常显示。
mask-image属性不能正常工作，图标能不正常显示。
bug描述：
【用途】：
使用CSS的mask-image属性，实现的矢量图标显示。
【问题】：
当运行在HuilderX的内置浏览器中，滚动条出现时，图标就变成了方块了（mask-image属性似乎是失效了）！
【平台兼容性】：
经反复测试，Android、ios、PC浏览器中都能正常运行，唯独HuilderX的内置浏览器会出这个问题！
【附件图说明】：
附件图1： 是bug没出现时（内置浏览器中运行时，绿色小图标正常显示）。
附件图2： 是当scroll-view的滚动条出现时（内置浏览器中运行的页面，绿色小图标不能正常显示）。
JackJiang (作者)
ok
2023-04-24 20:58