uni-app中backdrop-filter在iOS18中失效

uni-app中backdrop-filter在iOS18中失效

今天更新iOS18后发现backdrop-filter在iOS中失效，另外一台iOS17的设备可以正常渲染。（HbuilderX 4.08）

6 回复

请确认是app还是web端？上传有问题的示例页面。

更多关于uni-app中backdrop-filter在iOS18中失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


app，属性值没有代码提示，而且没效果，android

我也遇到这个不兼容的问题了，咋处理的

backdrop-filter是web属性，确认此属性在ios18设备的safari中是否可正常渲染？

我手机是ios18版本，在safari中无法正常渲染，他会变纯白色

在uni-app中，如果你遇到backdrop-filter在iOS 18中失效的问题，这可能是由于Apple在iOS 18中对Safari浏览器的渲染引擎进行了更新，导致一些CSS属性的行为发生变化。虽然具体的官方文档可能尚未详细说明这些变更，但你可以尝试以下几种替代方案或调整方法来解决这个问题。

1. 使用-webkit-backdrop-filter前缀

首先，确保你已经使用了-webkit-前缀，因为Safari和一些旧版浏览器可能仍然需要这个前缀来识别backdrop-filter属性。

.element {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

2. 检查父元素的背景

backdrop-filter依赖于其父元素或祖先元素的背景来应用效果。确保父元素有一个有效的背景（如颜色或图像），否则backdrop-filter可能无法正确显示。

<div class="parent">
  <div class="child">Content with backdrop filter</div>
</div>

.parent {
  background-color: white; /* Ensure a background is set */
}

.child {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent background for better visibility */
}

3. 使用SVG滤镜作为替代方案

如果backdrop-filter在iOS 18上仍然不起作用，你可以考虑使用SVG滤镜作为替代方案。这种方法虽然更复杂，但提供了更多的灵活性和兼容性。

<svg width="0" height="0">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
  </defs>
</svg>

<div class="container">
  <div class="filtered-content">
    Content with SVG filter applied
  </div>
</div>

.container {
  position: relative;
  background-color: white; /* Background for the container */
}

.filtered-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: url(#blur); /* Apply SVG filter */
  background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent background */
}

请注意，使用SVG滤镜可能会影响性能，特别是在复杂布局或大量元素上使用时。因此，在实际应用中，请根据具体情况权衡性能和效果。

回到顶部