uni-app中css的border-image-slice属性会导致APP闪退

uni-app中css的border-image-slice属性会导致APP闪退

示例代码：

<template>
<view class="border-container">
<view class="border1"></view>
</view>
</template> 
<style>
.border1 {
height: 240rpx;
border-image-slice: 10;
border-image-width: 20rpx;
border-image-outset: 20rpx 20rpx 8rpx 20rpx;
border-image-repeat: repeat repeat;
border-style: solid;
border-image-source: url("../../static/index-border-1.png");
}
</style>

操作步骤：

运行当前页面，就会闪退

预期结果：

应该要分割边框图片

实际结果：

闪退

bug描述：

APP：运行当前页面使用了border-image-slice: 10属性就会闪退，如果border-image-slice:10rpx就会不生效但是不会闪退
H5：运行正常


更多关于uni-app中css的border-image-slice属性会导致APP闪退的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中css的border-image-slice属性会导致APP闪退的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 border-image-slice 属性时，确实可能会导致某些平台（如 iOS 或 Android）的 APP 闪退。这是因为 border-image-slice 是一个较为复杂的 CSS 属性，某些平台的渲染引擎可能对其支持不完全，或者存在兼容性问题。

解决方案

  1. 检查平台兼容性： 确保你使用的 border-image-slice 属性在目标平台上是被支持的。可以通过查阅相关文档或使用工具（如 Can I use）来检查兼容性。

  2. 使用替代方案： 如果 border-image-slice 导致闪退，可以尝试使用其他 CSS 属性来实现类似的效果。例如，可以使用 border-image 属性的简化版本，或者使用 background-image 和 background-clip 来模拟边框效果。

    .example {
    border: 10px solid transparent;
    background-image: url('border-image.png');
    background-clip: padding-box;
}

  3. 避免复杂 CSS： 在某些平台上，复杂的 CSS 属性可能会导致性能问题或闪退。尽量避免使用过于复杂的 CSS 属性，或者将其分解为多个简单的属性。

  4. 使用条件编译： 如果问题只在特定平台上出现，可以使用 uni-app 的条件编译功能，针对不同平台使用不同的样式。

    /* #ifdef H5 */
.example {
    border-image-slice: 30;
}
/* #endif */

/* #ifdef APP-PLUS */
.example {
    border: 2px solid #000;
}
/* #endif */
回到顶部