html - 如何防止 CSS 过滤器有时导致 HTML 元素重新定位？

Question

有时，在应用 CSS 时filter，HTML 元素会重新定位。

作为一个简单的可重现示例，请执行以下步骤：

1. 转到https://www.virustotal.com/gui/
2. 单击“选择文件”并选择要扫描的任何本地文件
3. 在扫描结果页面中，注入这段几乎毫无意义的 CSS 代码：

vt-ui-shell { filter: hue-rotate(0deg); }

4. 单击站点的上传按钮，这是位于视口右上角附近的向上箭头
5. 注意网站显示的“通过在下面提交数据...”窗口的位置（您可能需要向下滚动才能看到它）
6. 删除步骤 3 中注入的 CSS 代码
7. 请注意，“通过在下面提交数据...”窗口的位置发生了变化

为什么会发生这种情况，有什么方法可以防止过滤器这样做？

---

更新：

我们的朋友 Temani Alf 慷慨地提供了一个指向这个相关问题的链接：
为什么在父级上应用 CSS-Filter 会破坏子级定位？

我认为这可以解释这种现象，但我有兴趣了解当您只能更改 CSS 而不能更改底层 HTML 代码时是否有办法防止这种情况发生。

标签： htmlcssuser-interfacecss-positioncss-filters