Mousemove fixed background not working in CSS

I was just following this tutorial on YouTube the other day. Everything quite goes well with the basic layout, but it seems that the background isn’t staying fixed while on mousemove. Here’s the entire project I’m working on:

let light = document.getElementById('light');

document.onmousemove = function(e) {
  light.style.left = e.pageX + 'px';
  light.style.top  = e.pageY + 'px';
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  background-image: linear-gradient(rgb(0 0 25 / 0.9), rgb(0 0 25 / 0.9)), url(https://picsum.photos/1920/1080);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
}

#light {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  z-index: 1;
  background: url(https://picsum.photos/1920/1080);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-radius: 50%;
}

<div id="light"></div>

I don’t know, but I assume that Chrome has deprecated the feature already. Therefore the effect isn’t working properly anymore. Any thoughts on how to troubleshoot this?

Solution

It is not deprecated, it just not work like this, the fixed value as per specs means:

fixed

The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the element. (This is not compatible with background-clip: text.)

Thus, because your viewport (<div id="light"></div>) is moving, not scrolling, the background image is moving also.

But your intention is clear, that trick can be done without background-attachment:

let light = document.getElementById('light');

document.onmousemove = function(e) {
  light.style.transform = `translate3d(${e.pageX}px, ${e.pageY}px, 0)`;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  background-image: url(https://picsum.photos/1920/1080);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
}

#light {
  position: absolute;
  top: -100px;
  left: -100px;
  width: 200px;
  height: 200px;
  z-index: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 99999px rgba(0, 0, 0, .8);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Highlight Image</title>
</head>

<body>
  <div id="light"></div>
</body>

</html>