css - 跨浏览器修复 - 位置 : fixed as descendants of transformed elements

Question

如所述here并在 this chromium bug report 中讨论根据 W3C spec

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

position: fixed 是任何具有 transform 而非 none 的元素的后代都是相对于该元素的。

---

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

是否有任何修复(“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);