SVG Avatar clip paths are occluding scollbars making scrolling impossible on web pages.

Reproduction

Use react teams provider to create your website. In my case, my app root looks like this:

ReactDOM.render(
    <React.StrictMode>
        <RTProvider themeName={TeamsTheme.Default} lang="en-US">
            <StoreProvider store={store}>
                <AppInsightsErrorBoundary
                    onError={() => <h1>I believe something went wrong</h1>}
                    appInsights={reactPlugin}>
                    <AppInsightsContext.Provider value={reactPlugin}>
                        <App />
                    </AppInsightsContext.Provider>
                </AppInsightsErrorBoundary>
            </StoreProvider>
        </RTProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

Then use overflow:auto in your App to enable scrolling. Reduce size of the browser window to see the scrollbars.

Expected Behavior

When you click on the scrollbars, you should be able to drag things to scroll.

Actual Behavior

When you click on the scrollbars, nothing happens. If you try to scroll with a touch pad, it scrolls. If you try to scroll with a touch surface, it scrolls.

I'm using Chrome. This also happens in Teams task modules.

Root cause

If you look at what's blocking the click, it is this:

From https://github.com/OfficeDev/microsoft-teams-ui-component-library/blob/main/src/lib/withTheme.tsx

SVGs don't have top and left attributes. These definitions are covering up the scollbars. Setting pointer-events: none fixes it.

  <svg
    viewBox="0 0 1 1"
    style={{ position: "absolute", left: "-9999px", top: "-9999px" }}
    role="none"
  >
    <defs>
      <clipPath
        id="avatar-clip-path--hex--large"
        clipPathUnits="objectBoundingBox"
      >
        <path d="M0.781177 0.107772L0.989252 0.461033C1.00358 0.485327 1.00358 0.514647 0.989252 0.538941L0.781177 0.892202C0.765728 0.918452 0.735978 0.934783 0.703609 0.934783H0.296347C0.264007 0.934783 0.234257 0.918452 0.218808 0.892202L0.0107039 0.538941C-0.00356796 0.514647 -0.00356796 0.485327 0.0107039 0.461033L0.218808 0.107772C0.234257 0.0815495 0.264007 0.065218 0.296347 0.065218H0.703609C0.735978 0.065218 0.765728 0.0815495 0.781177 0.107772" />
      </clipPath>
      <clipPath
        id="avatar-clip-path--hex--medium"
        clipPathUnits="objectBoundingBox"
      >
        <path d="M0.781177 0.0990553L0.989252 0.460166C1.00358 0.485 1.00358 0.514972 0.989252 0.539805L0.781177 0.900916C0.765728 0.92775 0.735978 0.944444 0.703609 0.944444H0.296347C0.264007 0.944444 0.234257 0.92775 0.218808 0.900916L0.0107039 0.539805C-0.00356796 0.514972 -0.00356796 0.485 0.0107039 0.460166L0.218808 0.0990553C0.234257 0.0722498 0.264007 0.0555553 0.296347 0.0555553H0.703609C0.735978 0.0555553 0.765728 0.0722498 0.781177 0.0990553" />
      </clipPath>
      <clipPath
        id="avatar-clip-path--hex--small"
        clipPathUnits="objectBoundingBox"
      >
        <path d="M0.781177 0.10532L0.989252 0.460789C1.00358 0.485234 1.00358 0.514738 0.989252 0.539184L0.781177 0.894652C0.765728 0.921066 0.735978 0.9375 0.703609 0.9375H0.296347C0.264007 0.9375 0.234257 0.921066 0.218808 0.894652L0.0107039 0.539184C-0.00356796 0.514738 -0.00356796 0.485234 0.0107039 0.460789L0.218808 0.10532C0.234257 0.0789336 0.264007 0.0625 0.296347 0.0625H0.703609C0.735978 0.0625 0.765728 0.0789336 0.781177 0.10532Z" />
      </clipPath>
    </defs>
  </svg>

OfficeDev / microsoft-teams-ui-component-library