Find who's fucking with fixed positioning (creating a stacking context) Thanks Josh!

sticky_positioning_fucker_finder.js

// Replace “.the-fixed-child” for a CSS selector
// that matches the fixed-position element:
const selector = '.the-fixed-child';

function findCulprits(elem) {
  if (!elem) {
    throw new Error(
      'Could not find element with that selector'
    );
  }

  let parent = elem.parentElement;

  while (parent) {
    const {
      transform,
      willChange,
      filter,
    } = getComputedStyle(parent);

    if (
      transform !== 'none' ||
      willChange === 'transform' ||
      filter !== 'none'
    ) {
      console.warn(
        '🚨 Found a culprit! 🚨\n',
        parent,
        { transform, willChange, filter }
      );
    }
    parent = parent.parentElement;
  }
}

findCulprits(document.querySelector(selector));

/*
So how do we fix it, once we've found the culprit?

- If the culprit uses overflow: hidden, we can switch to overflow: clip. Because overflow: clip doesn't create a scroll container, it doesn't have this problem!
- If the culprit uses auto or scroll, you might be able to remove this property, or push it lower in the DOM. This is a tricky problem, often without a quick solution.
*/

from joshwcomeau