uni-app中ios18不兼容backdrop-filter代码，如何解决？

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app中ios18不兼容backdrop-filter代码，如何解决？

产品分类

  • uniapp/H5

PC开发环境

  • 操作系统：Windows
  • 版本号：Hbuilde X 4.15
  • 类型：正式
  • 版本号：4.15

浏览器

  • 平台：Chrome
  • 版本：130.0.6723.92

项目创建方式

  • HBuilderX

示例代码

<view class="input_show_box">  
  <view>{{ $store.state.setting.domainName }}</view>  
  <view>{{ getAccount_info.shareCode }}</view>  
</view>  

.input_show_box {  
  overflow: hidden;  
  display: flex;  
  align-items: center;  
  padding: 0 24rpx 0 0;  
  height: 84rpx;  
  line-height: 84rpx;  
  background: linear-gradient(  
    90deg,  
    rgba(255, 255, 255, 0.3) 0%,  
    rgba(255, 255, 255, 0) 100%  
  );  
  border-radius: 24rpx;  
  border: var(--member-input-border);  
  backdrop-filter: blur(20rpx);  
  font-size: 32rpx;  
  color: var(--boxes-menu-text);  
  :first-child {  
    width: 460rpx;  
    height: 100%;  
    padding: 0 24rpx;  
    margin-right: 24rpx;  
    background: var(--member-input-back);  
    backdrop-filter: blur(20rpx);  
    border-right: var(--member-input-border);  
    overflow: hidden;  
    white-space: nowrap;  
    text-overflow: ellipsis;  
  }  
  :last-child {  
    overflow: hidden;  
    white-space: nowrap;  
    text-overflow: ellipsis;  
  }  
}

操作步骤

  • 在苹果手机ios18版本就能复现

预期结果

  • 希望这个bug能尽快处理

实际结果

  • ios18不兼容这行代码backdrop-filter

bug描述

  • ios18不兼容这行代码backdrop-filter

Harmonyos Next教程
1 回复

在uni-app中遇到iOS 18不兼容backdrop-filter的问题时，可以考虑使用替代方案或者通过条件编译来适配不同版本的iOS系统。虽然无法直接提供“建议”，但我可以展示如何通过代码来实现兼容处理。以下是一个可能的解决方案，通过CSS变量和JavaScript动态调整样式。

方案概述

  1. 使用CSS变量：定义一个CSS变量来控制是否应用backdrop-filter。
  2. JavaScript检测iOS版本：在页面加载时检测iOS版本，并根据版本动态调整CSS变量的值。
  3. 条件编译（可选）：如果uni-app支持针对特定平台的条件编译，可以利用这一点进一步优化。

代码示例

1. 定义CSS变量

在全局样式文件（如App.vue的<style>部分）中定义一个CSS变量：

:root {
  --use-backdrop-filter: 1; /* 默认为启用 */
}

.filtered-element {
  background-color: rgba(255, 255, 255, 0.5); /* 备用背景色 */
  backdrop-filter: blur(10px) brightness(50%);
  backdrop-filter: var(--use-backdrop-filter, none); /* 使用变量控制 */
}

2. JavaScript检测iOS版本并调整CSS变量

在页面的onLoad或mounted生命周期钩子中，添加检测iOS版本的逻辑，并动态调整CSS变量：

mounted() {
  const isIOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
  const iosVersion = isIOS && (navigator.userAgent.match(/OS (\d+)_/i) || [])[1];

  if (isIOS && iosVersion && parseInt(iosVersion, 10) >= 18) {
    // iOS 18及以上版本，禁用backdrop-filter
    document.documentElement.style.setProperty('--use-backdrop-filter', 'none');
  } else {
    // 其他情况，启用backdrop-filter（默认）
    document.documentElement.style.setProperty('--use-backdrop-filter', 'blur(10px) brightness(50%)');
  }
}

3. 条件编译（可选）

如果uni-app的条件编译支持针对iOS平台的特定版本，可以考虑使用条件编译来简化代码。不过，目前uni-app的条件编译主要支持平台区分（如#ifdef APP-PLUS、#ifdef H5等），对iOS版本的精确控制可能不太直接。因此，这里的条件编译更多是一个概念上的提示，实际实现可能依赖于其他方式（如上述JavaScript检测）。

总结

通过上述方法，可以在uni-app中实现针对iOS 18不兼容backdrop-filter的兼容处理。这种方法利用了CSS变量的灵活性和JavaScript的动态特性，能够在不牺牲太多性能的情况下实现跨版本兼容。

回到顶部