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

【问题标题】：Cross-browser fix - position: fixed as descendants of transformed elements跨浏览器修复 - 位置：固定为转换元素的后代
【发布时间】：2017-03-30 16:46:44
【问题描述】：

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

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

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

但是 IE

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

否则有没有办法“特征检测”而不是浏览器检测这种行为来替代受影响元素的样式？

【问题讨论】：

它在 chrome 中的损坏方式相同，所以可能是 webkit 的东西
您希望所有浏览器都按照规范运行还是与“损坏”的浏览器一样？
@Shaggy 根据规范，但我不介意任何解决方案，只要它在所有浏览器中都是统一的。
@CarolMcKay 通读链接的资源，详细描述它发生的原因/方式/地点。

标签： css cross-browser css-position fixed css-transforms

【解决方案1】：

我不知道在这种情况下有任何“polyfills”来强制跨浏览器保持一致性，因此，由于它在问题中作为可接受的替代方案提出，我将提供关于“特征检测”部分的答案。

您可以通过创建几个临时元素（一个嵌套在另一个元素中）来测试浏览器是否符合规范。使用translatey() 将父元素从其“自然”位置向下移动，并修复子元素的position，top 的值为0。然后，通过getBoundingClientRect()，我们可以检查子元素的top是否与父元素的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);

【讨论】：