CSS Helpers

scroll-containers.js

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

function findCulprits(elem) {
  if (!elem) {
    throw new Error(`Could not find element with selector: "${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));

sticky.js

// ref: https://courses.joshwcomeau.com/css-for-js/02-rendering-logic-2/17-troubleshooting

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

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

  let parent = elem.parentElement;

  while (parent) {
    const { overflow } = getComputedStyle(parent);

    if (["auto", "scroll", "hidden"].includes(overflow)) {
      console.log(overflow, parent);
    }

    parent = parent.parentElement;
  }
}

findCulprits(document.querySelector(selector));

visually-hidden.css

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}