Parallax Effect Not Working Consistently Across Browsers and Devices

Question

I am working on implementing a parallax scrolling effect on a website to create an illusion of depth as users scroll. This effect is achieved by moving background images at a slower rate than the foreground content, using a combination of CSS for styling and JavaScript for scroll event handling.

The parallax effect works as expected on desktop browsers like Chrome and Firefox, providing a smooth and visually appealing depth effect. However, I've encountered inconsistency across different browsers and devices. Intriguingly, the parallax scrolls as intended when my laptop is connected to an external monitor but not on the laptop's screen itself, except when using Safari, where it works fine regardless of the display being used.

What I Tried:

CSS Adjustments: I experimented with various CSS properties related to the parallax effect, such as transform, perspective, and background-attachment. My goal was to see if different configurations could improve compatibility or performance across browsers.

JavaScript Optimization: I optimized the scroll event handling in JavaScript to minimize performance overhead and ensure smooth animation. This included debouncing scroll events and using requestAnimationFrame for updating positions to match the scrolling.

Testing Across Devices: I conducted extensive testing across multiple browsers and devices, including desktops, laptops, tablets, and smartphones, to observe the parallax effect's behavior under different conditions.

External Monitor: Noticing the issue, I also tested the website with an external monitor connected to my laptop to compare the behavior.

Consistency Across Browsers and Devices: My primary expectation was that the parallax effect would work consistently across all browsers and devices, providing users with a seamless and engaging experience regardless of their platform.

Smooth Scrolling on All Screens: Given that the effect worked well on desktop browsers like Chrome and Firefox, I expected similar performance on mobile devices and Safari, as well as consistent behavior regardless of whether the laptop's screen or an external monitor was used.

No Major Compatibility Issues: Considering the widespread use of parallax effects and the technologies involved (CSS and JavaScript), I did not anticipate encountering significant compatibility issues that could not be resolved with standard web development practices.

Its just very odd that testing it on chrome on my laptop makes it not want to work. Any help would be really appreciated.

window.addEventListener('scroll', function() {
    var scrolledHeight= window.pageYOffset;
    var parallax = document.querySelector('.parallax');
    // Adjust the background position based on the scroll position
    parallax.style.backgroundPositionY = -(scrolledHeight * 0.5) + 'px';
  });

body, html {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

.parallax {
  /* The image used */
  background-image: url('https://picsum.photos/200/300');

  /* Set a specific height */
  height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.content {
  height: 2000px; /* Added height so you can scroll */
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
}

<div class="parallax"></div>
<div class="content">
  <h1>Parallax Effect</h1>
  <p>This is a simple demonstration of a parallax scrolling effect.</p>
  <p>Scroll down to see the effect!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>