跨浏览器修复 - 位置:固定为转换元素的后代

Question

如此处所述，并根据W3C规范在此铬错误报告中讨论

在 HTML 命名空间中，除转换的 none 值以外的任何值都会导致创建堆叠上下文和包含块。该对象充当固定位置后代的包含块。

position: fixed是具有

none以外的任何元素的后代transform相对于该元素。

---

但是，IE <= 11 和至少到 FF36 的 Firefox 不符合规范，而是相对于视口定位元素（如最初预期的那样）。

是否有任何修复（"polyfill"）可以在所有浏览器上获得相同的行为？

否则，有没有办法"功能检测"而不是浏览器检测此行为来替代样式受影响的元素？

Answer 1

我不知道在这种情况下有任何"polyfills"可以强制跨浏览器一致性，因此，由于它在问题中作为可接受的替代方案呈现，我将为有关"功能检测"的部分提供答案。

您可以通过创建几个临时元素来测试浏览器是否符合规范，一个元素嵌套在另一个元素中。使用 translatey() 将父元素从其"自然"位置向下移动并固定子元素的position，top值为 0 。然后，通过使用 getBoundingClientRect() ，我们可以检查子元素的top是否等于父元素的 - 如果是，则浏览器符合规范。

var body=document.body,
    div=document.createElement("div"),
    span=document.createElement("span"),
    compliant;
div.style.transform="translatey(100px)";
span.style.position="fixed";
span.style.top=0;
div.appendChild(span);
body.appendChild(div);
compliant=span.getBoundingClientRect().top===div.getBoundingClientRect().top;
body.removeChild(div);
console.log(compliant);