Javascript - window.scroll({ behavior: 'smooth' }) not working in Safari

Question

As the title says, it works perfectly fine on Chrome. But in Safari, it just sets the page to the desired top and and left position. Is this an expected behaviour? Is there

Answer 1

The workarounds above all make up for the lack of Safari support for behaviors.

It's still necessary to detect when a workaround is needed.

This little function will detect if smooth scrolling is supported by the browser. It returns false on Safari, true on Chrome and Firefox:

// returns true if browser supports smooth scrolling
const supportsSmoothScrolling = () => {
  const body = document.body;
  const scrollSave = body.style.scrollBehavior;
  body.style.scrollBehavior = 'smooth';
  const hasSmooth = getComputedStyle(body).scrollBehavior === 'smooth';
  body.style.scrollBehavior = scrollSave;
  return hasSmooth;
};