Clip-path喷绘效果主流浏览器异常，VS Code预览正常，居中布局失效

问题现象 #

• 基于clip-path和JavaScript实现的鼠标移动喷绘效果，在VS Code本地预览完全正常，但在Chrome、Firefox、Edge等主流浏览器中，clip-path的显示位置随机，仅短暂出现或完全不显示
• 元素左对齐（不设置margin: auto）时效果正常，改为居中布局后失效

问题根源 #

鼠标坐标计算逻辑存在缺陷：使用pageX/pageY减去offsetLeft/offsetTop的方式，在元素通过flex或margin: auto居中时，无法准确获取鼠标在元素内部的相对位置，尤其是页面存在滚动或嵌套定位容器时，坐标偏差会导致clip-path定位错误。

修复后的完整代码 #

HTML #

<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>

CSS #

.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;
}

JavaScript #

document.addEventListener('DOMContentLoaded', function () {
    const cars = document.querySelectorAll('.car');
    cars.forEach(car => {
        car.addEventListener('mousemove', function (e) {
            const rect = car.getBoundingClientRect();
            // 获取鼠标在元素内部的相对坐标
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

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

修复说明 #

• 改用getBoundingClientRect()获取元素的准确位置信息，该方法返回元素相对于视口的位置，不受页面滚动和父级布局影响
• 使用clientX/clientY代替pageX/pageY，确保坐标基于当前视口，避免滚动导致的偏差
• 计算逻辑调整后，无论元素是左对齐还是居中布局，都能准确获取鼠标在元素内的相对位置，clip-path定位完全正常

内容的提问来源于stack exchange，提问作者Hoffmann