One Click Accessibility插件点击灰度选项后位置偏移求助

A. 为何仅Chrome中出现偏移？ #

当点击灰度选项后，body被添加了CSS滤镜类，Chrome浏览器会为应用了filter属性的元素创建新的堆叠上下文和包含块。原本设置为position:fixed的工具栏，默认是相对于视口定位，但在Chrome的这个渲染逻辑下，会变成相对于应用了filter的body元素（而非视口）定位。如果页面内容高度超过视口，工具栏就会跑到整个页面的底部，造成“消失”的视觉效果。其他浏览器对filter与position:fixed的交互处理逻辑不同，因此未出现该问题。

B. 修复方法 #

通过给工具栏添加transform: translateZ(0)属性，强制浏览器启用硬件加速渲染，打破filter对fixed定位的影响，让工具栏重新回到基于视口的定位逻辑。修改后的CSS如下：

/* 调整工具栏定位，避免Chrome filter导致的偏移 */
#pojo-a11y-toolbar.pojo-a11y-toolbar-left {
    bottom: 20px !important;
    position: fixed !important;
    transform: translateZ(0); /* 触发硬件加速，隔离filter的影响 */
    z-index: 99999; /* 确保工具栏层级高于其他内容 */
}

/* 保持切换按钮在工具栏底部 */
#pojo-a11y-toolbar.pojo-a11y-toolbar-left .pojo-a11y-toolbar-toggle {
    bottom: 0 !important;
}

如果上述方法无效，还可以尝试另一种方案：明确覆盖插件可能设置的top属性，确保底部定位逻辑稳定：

#pojo-a11y-toolbar.pojo-a11y-toolbar-left {
    bottom: 20px !important;
    position: fixed !important;
    top: auto !important; /* 覆盖插件默认的top值，确保底部定位优先 */
    z-index: 99999;
}

#pojo-a11y-toolbar.pojo-a11y-toolbar-left .pojo-a11y-toolbar-toggle {
    bottom: 0 !important;
}

内容的提问来源于stack exchange，提问作者Shaun Taylor