发布为H5时,最终生成的uni.css不完整造成uni-text组件添加selectable属性后在Safari浏览器中仍无法选中文本。

发布为H5时,最终生成的uni.css不完整造成uni-text组件添加selectable属性后在Safari浏览器中仍无法选中文本。

开发环境 版本号 项目创建方式
Windows 11 专业版 22H2, 操作系统版本 22621.2428, 体验 Windows Feature Experience Pack 1000.22674.1000.0 HBuilderX

示例代码:

<text selectable="true" user-select="true">{{content}}</text>

操作步骤:

在任意位置添加:

<text selectable="true" user-select="true">{{content}}</text>

预期结果:

<text>组件内部的文本可以被选中。

实际结果:

在Safari浏览器中,<text>组件内部的文本不可以被选中。

bug描述:

在生产环境(发行)下,发布为H5时最终导出的uni.css中,选择器为uni-text[selectable]的样式中缺少关于user-select属性-x-前缀的polyfill,造成在Safari浏览器中user-select属性失效(Safari浏览器不支持无-webkit-前缀的user-select属性,见MDN:user-select - CSS:层叠样式表 | MDN)。

但由于html,body中包含了一个-webkit-user-select:none,因此按照CSS的继承原理会造成<text>组件添加selectable属性后在Safari浏览器中仍无法选中里面的文本。

建议官方在选择器为uni-text[selectable]的样式中添加规则:-webkit-user-select:text

开发者可用的临时解决方案:

在App.vue的style标签中添加如下代码,style标签不可加scope属性:

uni-text[selectable] {  
    -webkit-user-select: text;  
}

1 回复

这是一个已知的Safari浏览器兼容性问题。uni-app在H5平台编译时生成的uni.css确实缺少对Safari浏览器的-webkit-前缀支持。

您提出的临时解决方案是正确的,在App.vue中添加以下全局样式可以解决此问题:

uni-text[selectable] {
    -webkit-user-select: text;
}
回到顶部