Fixed Positioning
Wed Sep 29 2021 20:42:05 GMT+0000 (Coordinated Universal Time)
Saved by
@rhaduuu
#javascript
// Replace this with a relevant selector.
// If you use a tool that auto-generates classes,
// you can temporarily add an ID and select it
// with '#id'.
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
} = getComputedStyle(parent);
if (transform !== 'none' || willChange === 'transform') {
console.warn(
'🚨 Found a culprit! 🚨\n',
parent,
{ transform, willChange }
);
}
parent = parent.parentElement;
}
}
findCulprits(document.querySelector(selector));
content_copyCOPY
This snippet will crawl up the DOM tree checking each parent to see if it includes any properties that break position: fixed. There may be more than one culprit.
https://courses.joshwcomeau.com/css-for-js/02-rendering-logic-2/13-fixed
Comments