Cross-browser fix - position: fixed as descendants of transformed elements

Question

As described here and discussed in this chromium bug report according to 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 that are descendant of any element with transform other than none are relative to that element.

However IE <= 11 and Firefox at least up to FF36 do not conform to the spec but position the element relative to the viewport (as originally intended).

Is there any fix ("polyfill") to get the same behaviour across all browsers?

Otherwise is there a way to "feature detect" instead of browser detect this behaviour to alternatively style affected elements?

it's broken the same way in chrome so maybe it's a webkit thing — Carol McKay, Jul 15 '16 at 08:23
Do you want all browsers to behave as per the spec or in the same way as the "broken" browsers? — Shaggy, Jul 15 '16 at 09:23
@Shaggy Rather per spec but I wouldn't mind any solution as long as it's uniform across all browsers. — Aides, Jul 15 '16 at 09:40
@CarolMcKay read through the linked sources for a detailed description of why/how/where it happens. — Aides, Jul 15 '16 at 09:40

score 1 · Accepted Answer · edited Mar 30 '17 at 08:46

I don't know of any "polyfills" to force cross browser consistency in this situation so, as it is presented as an acceptable alternative in the question, I'll provide an answer to the part about "feature detection".

You could test whether or not the browser complies with the spec by creating a couple of temporary elements, one nested inside the other. Use translatey() to move the parent element down from its "natural" position and fix the position of the child element, with a top value of 0. Then, by using getBoundingClientRect(), we can check whether or not the top of the child element is equal to that of the parent - if it is, the browser complies with the spec.

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);

Cross-browser fix - position: fixed as descendants of transformed elements

1 Answers1