Clip-path 无法在 Web 浏览器（Mozilla、Edge、Chrome）上正常工作，但在预览版 Visual Code Studio HTML、CSS、JS 上完美工作

Question

我想为我的公司创建一个精美的英雄部分。我使用clip-path和一些JS来实现鼠标移动时的喷漆效果，并且它在VCS预览中完美运行。但是，当我在 Chrome、Mozilla 或 Edge 等网络浏览器中尝试它时，它不起作用。似乎无法正确找到光标的位置。剪辑路径会在随机位置显示几秒钟，或者根本不显示。 更重要的是？如果它的左角没有边距：自动；效果很好，但必须居中。

我想使用它的页面：https://hoffmannteile.de/ 这是我正在使用的代码（它必须位于一个文件中，因为它是一个封闭的 CMS）：

document.addEventListener('DOMContentLoaded', function () {
    const cars = document.querySelectorAll('.car');
    cars.forEach(car => {
        car.addEventListener('mousemove', function (e) {
            const x = e.pageX - car.offsetLeft;
            const y = e.pageY - car.offsetTop;

            car.style.setProperty('--x', x + 'px');
            car.style.setProperty('--y', y + 'px');
        });
    });
});

.paint {
  max-height: 338px;
  max-width: 600px;
  margin: auto;
}

.malowanie {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.cont {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cont .car {
  position: relative;
  height: 338px;
  width: 600px;
  background-image: url('https://composer.idosell.com/gfx/30226/SprinterWhite.png');
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cont .car::before {
  content: '';
  position: absolute;
  z-index: 1;
}

.cont .car::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--img);
  background-size: cover;
  clip-path: circle(0px at 0 0);
  z-index: 2;
  transition: clip-path 0.15s;
}

.cont .car:hover::after {
  clip-path: circle(100px at var(--x) var(--y));
  cursor: url('https://composer.idosell.com/gfx/30226/paint-spray-icon.svg'), auto;
}

<section class="paint">
    <div class="malowanie">
        <div class="cont">
            <div class="car" style="--img: url('https://composer.idosell.com/gfx/30226/SprinterRedHof.png')"></div>
        </div>
    </div>
</section>

Answer 1

我忘了提及，当我在浏览器的左上角使用 index.html 时，一切正常。但是嵌入网站后，还是失败