[ScrollArea] Uses feature not present in Safari 13 — browser support (general)

We have had reports of the documentation website breaking (because we use ScrollArea for the nav and other). ScrollArea uses the media query list change event which isn’t supported in Safari 13.

export function onPrefersReducedMotionChange(
  callback: (prefers: boolean) => any,
  globalWindow: Window & typeof globalThis = window
) {
  try {
    const mediaQueryList = globalWindow.matchMedia(QUERY);
    mediaQueryList.addEventListener('change', listener);
    return function () {
      mediaQueryList.removeEventListener('change', listener);
    };
  } catch (e) {}

  return function () {};

  function listener(event: MediaQueryListEvent) {
    callback(!event.matches);
  }
}

Generally, we need to address how we’re going to deal with the fact we don’t include polyfills. What should the experience be, etc.

[jjenzz]

I had actually suggested we create a Supports component when the ScrollArea was originally created that would use error boundaries to do something exactly like that 🙂

@benoitgrelard The new version of the ScrollArea I am working on will not have the forceNative prop so might be a good chance to revisit this Supports component discussion.

Original discussion here for reference: https://github.com/radix-ui/primitives/pull/203#discussion_r501156851

[benoitgrelard]

That’s pretty cool!