Find elements stretching viewport

vptracer.js

const viewport = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
const possibleCauses = [];
console.log(`Looking for elements outside viewport width ${viewport}px...`);
[...document.getElementsByTagName('*')].forEach((element, index) => {
  const limit = element.getBoundingClientRect().right;
  const style = window.getComputedStyle(element);

  if (limit <= viewport) return;
  if (style.display === 'none') return;
  if (style.visibility === 'hidden') return;
  if (parseInt(style.opacity) === 0) return;
  if (element.tagName === 'BODY') return;
  if (element.tagName === 'HTML') return;

  let depth = 0;
  let visib = true;
  let parent = element.parentNode;
  while (parent && '1238'.indexOf(String(parent.nodeType)) !== -1 && depth < 40) {
    const style = window.getComputedStyle(parent);
    if (style.display === 'none') visib = false;
    if (style.visibility === 'hidden') visib = false;
    if (parseInt(style.opacity) === 0) visib = false;
    parent = parent.parentNode;
    depth++;
  }

  if (!visib) return;
  element.className += ` vptrace${index}`
  possibleCauses.push({ element, limit, depth, index });
});

document.body.innerHTML += '<div id="vptracer" style="position:fixed;display:block;right:0;bottom:0;width:1px;height:1px"></div>';
const sortedCauses = possibleCauses.sort((a, b) => (a.limit < b.limit) ? 1 : ((b.limit > a.limit) ? -1 : 0));
const vptracer = document.getElementById('vptracer');
const likelyCauses = [];
const likelyIndices = [];
sortedCauses.forEach((element, index) => {
  const currentLimit = vptracer.getBoundingClientRect().right;
  const [currentInstance] = document.getElementsByClassName(`vptrace${element.index}`);
  if (!currentInstance) return;
  currentInstance.style.display = 'none';
  const createdDifference = currentLimit - vptracer.getBoundingClientRect().right;
  currentInstance.style.display = '';
  if (createdDifference !== 0) {
    element.pushesViewportBy = `${createdDifference}px`;
    element.element = currentInstance;
    likelyCauses.push(element);
    likelyIndices.push(index);
  }
});

const outputStyle = 'background: #333; color: #fff';
likelyIndices.reverse().forEach((index) => (sortedCauses.splice(index, 1)));
vptracer.parentNode.removeChild(vptracer);

let traceIndex = 0;
const allPossibilites = [...likelyCauses, ...sortedCauses];
const trace = () => {
  if (traceIndex >= allPossibilites.length) return;
  const element = allPossibilites[traceIndex];
  const [currentInstance] = document.getElementsByClassName(`vptrace${element.index}`);
  if (!currentInstance) return;
  currentInstance.style.display = 'none';
  console.log(`%cHiding element ${(traceIndex + 1)}/${allPossibilites.length}`, outputStyle);
  console.log(element);
  traceIndex++;
}

console.log(`%cFound elements very likely pushing viewport `, outputStyle);
console.groupCollapsed(`Display ${likelyCauses.length} elements`);
likelyCauses.forEach((element) => (console.log(element.element)));
console.groupEnd();
console.log(`%cFound elements possibly pushing viewport `, outputStyle);
console.groupCollapsed(`Display ${sortedCauses.length} elements`);
sortedCauses.forEach((element) => (console.log(element.element)));
console.groupEnd();