Fix flakey chromatic visual regression tests

[sophschneider]

For some reason, stories with Popover and/or Tooltip are indeterminately changing every time chromatic regression tests are run. Examples:

• https://shopify.chromatic.com/build?appId=5d559397bae39100201eedc1&number=19008
• https://shopify.chromatic.com/build?appId=5d559397bae39100201eedc1&number=19170

We should figure out why this is happening and fix it

[jesstelford]

A couple hypotheses:

1. Caused by layout shift
   • Chromatic is taking the screenshot, then layout shift is occurring.
   • This could happen due to timeouts in the rendering pipeline forcing Chromatic to take the screenshot before the entire component has finished rendering. Eg; the VMs running the browser is under higher than normal load, so rendering takes longer, etc.
2. Caused by inconsistent JS positional calculations
   • The Popover relies on performing JS-based layout calculations after initial render/mount.
   • These calculations could be taking variable amounts of time, so the screenshot is sometimes taken before, and sometimes taken after the full positional calculation is completed.
   • Alternatively, it could be the results of the calculations themselves being inconsistent. Perhaps due to timing with mounting and other browser layout tasks (see Remove .vscode folder #1 above), or something to do with the order of rendering the components in the story.
3. Caused by async font loading
   • We load the Google font CSS in a blocking way before stories are rendered.
   • But that CSS triggers a non-blocking/async load of the Inter font from Google's CDN (browsers can decide the priority of loading fonts, and it defaults to "low" afaict)
   • So the screenshot might sometimes be taken when the font has fully loaded and rendered, then other times be taken when the font hasn't yet loaded (which would affect component layout and sizing, etc)
   • Possible fix here: [Storybook] Fix font-loading in Chromatic #9993

[sophschneider]

I was able to replicate a layout shift in storybook:

1. go to a flakey story (anything with an open Tooltip or Popover, e.g. LegacyCard with separate header
2. Empty cache and hard reload
3. remount component on story to see layout shift

Interestingly, subsequent refreshes don't cause a layout shift, only the first after an empty cache

replicate-shift.mov

[sophschneider]

seems to be flakey calculations in PositionedOverlay

with the same window size and process followed from above

Before remount	After remount

As you can see, the left px value is changing/calculating differently

[sophschneider]

It looks like the activatorRect is the value changing. When I console log the bounding box for the activator when replicating the issue, I get changing x, left, and width values

[sophschneider]

I've determined this is a font loading issue.

Since the width is being incorrectly calculated, I put a debugger after the first bounding box calculation. At that point, the font is smaller than the final render causing a different bounding box calculation

First bounding box calculation	Correct bounding box calculation

I tried pulling #9993 but it didn't fix the issue