uni-app filter: grayscale(1)页面置灰时uni-popup的定位bug
uni-app filter: grayscale(1)页面置灰时uni-popup的定位bug
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 22H2 | HBuilderX |
### 操作步骤：
使用filter: grayscale(1);置灰页面，并且页面列表长度超过页面时，使用uni-popup
### 预期结果：
使用filter: grayscale(1);置灰页面，并且页面列表长度超过页面时，uni-popup会定位到页面最低端
### 实际结果：
使用filter: grayscale(1);置灰页面，并且页面列表长度超过页面时，uni-popup会定位到列表最低端
### bug描述：
使用filter: grayscale(1);置灰页面，并且页面列表长度超过页面时，uni-popup的定位出现问题，uni-popup会定位到列表最低端，而不是页面最低端
5 回复
在使用 uni-app 开发时，如果你在页面上应用了 filter: grayscale(1) 来实现页面置灰效果，可能会遇到 uni-popup 组件的定位问题。这是因为 filter 属性会影响元素的渲染层，导致 position: fixed 或 position: absolute 的元素定位出现异常。
解决方案
1. 使用 transform 替代 filter
filter 属性会创建一个新的层叠上下文，导致 position: fixed 的元素定位失效。你可以尝试使用 transform 属性来实现类似的效果，例如：
.grayscale {
transform: scale(1);
filter: grayscale(1);
}但这种方法可能无法完全替代 filter 的效果，具体效果需要根据实际情况调整。
2. 将 filter 应用到特定元素
如果可能，尽量避免将 filter 应用到整个页面。你可以将 filter 应用到页面的特定元素上，而不是 body 或 html 元素。例如：
<template>
<view class="page">
<view class="content">
<!-- 页面内容 -->
</view>
<uni-popup ref="popup"></uni-popup>
</view>
</template>
<style>
.page {
filter: grayscale(1);
}
</style>这样，uni-popup 不会受到 filter 的影响。
3. 使用 backdrop-filter
如果你的目标是在整个页面上应用灰度效果，并且希望 uni-popup 不受影响，可以尝试使用 backdrop-filter。backdrop-filter 只会影响背景元素，而不会影响 position: fixed 的元素。
.page {
backdrop-filter: grayscale(1);
}不过，backdrop-filter 的浏览器兼容性较差，需要根据实际情况测试。
4. 手动调整 uni-popup 的位置
如果上述方法都无法解决问题，你可以手动调整 uni-popup 的位置。通过监听页面滚动或尺寸变化，动态计算并设置 uni-popup 的位置。
onPageScroll(e) {
const popup = this.$refs.popup;
if (popup) {
popup.setStyle({
top: e.scrollTop + 'px'
});
}
}