将假光标放在页面图层顶部的问题

Question

我在 Puppeteer 中有一个 div，它的作用就像一个假光标。我正在使用“node-puppeteer-apng”来记录鼠标移动，当生成视频时，这个假光标会显示在先前记录的移动之后。除了一件事之外，一切是否正常： 当假光标穿过菜单或模式时，它被此菜单或模式隐藏。我已经尝试更改它的 z-index，但没有成功。

这就是我将 div 放入页面的方式：

// This injects a box into the page that moves with the mouse;
// Useful for debugging
async function MouseHelper(page) {
    await page.evaluateOnNewDocument(() => {
    // Install mouse helper only for top-level frame.
    if (window !== window.parent)
        return;
    window.addEventListener('DOMContentLoaded', () => {
        const box = document.createElement('puppeteer-mouse-pointer');
        const styleElement = document.createElement('style');
        styleElement.innerHTML = `
        puppeteer-mouse-pointer {
            pointer-events: none;
            position: absolute;
            top: ${window.innerHeight/2}px;
            left: ${window.innerWidth/2}px;
            width: 5vw;
            height: 5vw;
            border-radius: 2.5vw;
            margin: -10px 0 0 -10px;
            padding: 0;
            transition: background .2s, border-radius .2s, border-color .2s;
        }
        puppeteer-mouse-pointer.button-1 {
            transition: none;
            background-color: rgba(0,0,0,0.9) !important;
        }
        puppeteer-mouse-pointer.button-2 {
            transition: none;
            border-color: rgba(0,0,255,0.9);
        }
        puppeteer-mouse-pointer.button-3 {
            transition: none;
            border-radius: 0.1vw;
        }
        puppeteer-mouse-pointer.button-4 {
            transition: none;
            border-color: rgba(255,0,0,0.9);
        }
        puppeteer-mouse-pointer.button-5 {
            transition: none;
            border-color: rgba(0,255,0,0.9);
        }`;
        document.head.appendChild(styleElement);
        document.body.appendChild(box);
        document.addEventListener('mousedown', event => {
            updateButtons(event.buttons);
            box.classList.add('button-' + event.which);
        }, true);
        document.addEventListener('mouseup', event => {
            updateButtons(event.buttons);
            box.classList.remove('button-' + event.which);
        }, true);
        document.addEventListener('scroll', event => {
            box.style.top = (window.innerHeight/2) + 
                document.scrollingElement.scrollTop + 'px';
            updateButtons(event.buttons);
        }, true);
        function updateButtons(buttons) {
            for (let i = 0; i < 5; i++)
                box.classList.toggle('button-' + i, buttons & (1 << i));
            }
        }, false);
    });
};

编辑：

你可以下载这个apng file并用你的浏览器打开它自己看看发生了什么

或者看看下面这两张图

Answer 1

经过 4 个月的努力，我再次尝试将 z-index 放在同一个 div 中，终于成功了！

// This injects a box into the page that moves with the mouse;
// Useful for debugging
const MouseHelper = async (page) => {
  await page.evaluateOnNewDocument(() => {
    // Install mouse helper only for top-level frame.
    if (window !== window.parent)
      return;
    window.addEventListener('DOMContentLoaded', () => {
      const box = document.createElement('puppeteer-mouse-pointer');
      const styleElement = document.createElement('style');
      styleElement.innerHTML = `
      puppeteer-mouse-pointer {
        pointer-events: none;
        position: absolute;
        top: ${window.innerHeight/2}px;
        left: ${window.innerWidth/2}px;
        width: 5vw;
        height: 5vw;
        border-radius: 2.5vw;
        margin: -10px 0 0 -10px;
        padding: 0;
        transition: background .2s, border-radius .2s, border-color .2s;
        z-index: 999999999999999999999;
      }
      puppeteer-mouse-pointer.button-1 {
        transition: none;
        background-color: rgba(0,0,0,0.9) !important;
      }
      puppeteer-mouse-pointer.button-2 {
        transition: none;
        border-color: rgba(0,0,255,0.9);
      }
      puppeteer-mouse-pointer.button-3 {
        transition: none;
        border-radius: 0.1vw;
      }
      puppeteer-mouse-pointer.button-4 {
        transition: none;
        border-color: rgba(255,0,0,0.9);
      }
      puppeteer-mouse-pointer.button-5 {
        transition: none;
        border-color: rgba(0,255,0,0.9);
      }
    `;
      document.head.appendChild(styleElement);
      document.body.appendChild(box);
      document.addEventListener('mousedown', event => {
        updateButtons(event.buttons);
        box.classList.add('button-' + event.key);
      }, true);
      document.addEventListener('mouseup', event => {
        updateButtons(event.buttons);
        box.classList.remove('button-' + event.key);
      }, true);
      document.addEventListener('scroll', event => {
        box.style.top = (window.innerHeight/2) + 
          document.scrollingElement.scrollTop + 'px';
        updateButtons(event.buttons);
      }, true);
      const updateButtons = (buttons) => {
        for (let i = 0; i < 5; i++)
          box.classList.toggle('button-' + i, buttons & (1 << i));
      }
    }, false);
  });
};

我不知道它是否已修复，因为我在 50 和 54 行中将“event.which”替换为“event.key”，或者它是在 chrome api 或 puppeteer 中修复的错误，但我很欣慰它可以工作现在！