发布为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;
}