uni-app APP环境下webView组件加载的网页不支持css属性backdrop-filter

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

uni-app APP环境下webView组件加载的网页不支持css属性backdrop-filter

操作步骤：

  • backdrop-filter: blur(10rpx);

预期结果：

  • 正常显示

实际结果：

  • 异常显示

bug描述：

  • APP环境下webView组件加载的网页不支持css属性backdrop-filter
  • H5环境下可正常显示

| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| Mac      | 15.1   | CLI          |
| iOS      | iOS 18 |              |
| 苹果     | 12     |              |
| vue      | vue3   |              |
| CLI      | 3.0.0-4020920240930001 |          |

Harmonyos Next教程
2 回复

不同环境的版本不同，规避此问题。具体版本信息自己打印 user ageent 看看


在uni-app的APP环境下，webView组件确实存在一些对CSS属性的兼容性问题，其中就包括backdrop-filter。这通常是因为原生WebView组件对CSS新特性的支持不如现代浏览器那么全面。尽管我们无法直接修改原生WebView的渲染引擎来增强对backdrop-filter的支持，但可以通过一些替代方案来实现类似的效果。

以下是一个使用图片遮罩和模糊效果的替代方案，虽然不完全等同于backdrop-filter，但可以在一定程度上模拟其视觉效果。这个方案使用了一个覆盖层，并通过CSS的filter属性应用模糊效果。

示例代码

1. 在uni-app的页面中添加webView组件

<template>
  <view class="container">
    <web-view src="https://your-web-page-url.com" class="webview"></web-view>
    <view class="overlay" v-if="showOverlay"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showOverlay: false // 控制遮罩层的显示
    };
  },
  mounted() {
    // 根据需要设置showOverlay的值来控制遮罩层的显示
    this.showOverlay = true; // 例如，在这里我们直接显示遮罩层
  }
};
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.webview {
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5); /* 半透明背景 */
  filter: blur(10px); /* 模糊效果 */
  pointer-events: none; /* 确保遮罩层不会阻挡事件 */
}
</style>

2. 解释

  • webView组件用于加载网页。
  • overlay类用于创建一个覆盖在webView上的遮罩层。
  • 通过filter: blur(10px);对遮罩层应用模糊效果。
  • background: rgba(255, 255, 255, 0.5);设置了一个半透明的白色背景，你可以根据需要调整颜色和透明度。
  • pointer-events: none;确保遮罩层不会干扰用户对webView内部内容的交互。

虽然这种方法不能完全替代backdrop-filter，但它提供了一种在uni-app的APP环境下模拟模糊背景效果的可行方案。如果你的应用对视觉效果有严格要求，可能需要考虑其他技术栈或原生开发来实现更复杂的效果。

回到顶部