Font not consistently rendered on recent versions of the CLI

[agrobbin]

The problem

In the last couple of weeks, we've noticed a significant increase in the # of intermittent diffs due to a missing font (in our case, Font Awesome).

Sometimes the font icons show up:

And sometimes they show as rectangles:

Environment

• Node version: 14.17.3
• @percy/cli version: 1.0.0-beta.68
• Version of Percy SDK you’re using:
• If needed, a build or snapshot ID: 12907148
• OS version: Chrome 91.0
• Type of shell command-line [interface]: Ruby

Details

The source diff does not include anything related to the font CSS or the related HTML. Due to the way the fonts are loaded (as part of a package that also includes all of our other page CSS, which is shown correctly) makes me think it's not an asset discovery/downloading issue, but something else.

Debug logs

The specific snapshot debug log output:

[percy:core] Handling snapshot: (0ms)
[percy:core] -> name: Admin2 / Deals / Show / Deal Process / Approvals / Not Started / Trigger Approval (0ms)
[percy:core] -> url: http://admin.vendr.localhost:40193/deals/a23a5ca6-dc41-4209-afb8-1f1753ca6e0d#process (0ms)
[percy:core] -> widths: 1200px (0ms)
[percy:core] -> minHeight: 1024px (0ms)
[percy:core] -> clientInfo: percy-capybara/5.0.0 (0ms)
[percy:core] -> environmentInfo: capybara/3.33.0 ruby/3.0.2 (0ms)
[percy:core:page] Page created (7ms)
[percy:core:page] Resize page to 1200x1024 (33ms)
[percy:core:page] Navigate to: http://admin.vendr.localhost:40193/deals/a23a5ca6-dc41-4209-afb8-1f1753ca6e0d#process (5ms)
[percy:core:discovery] Handling request: http://admin.vendr.localhost:40193/deals/a23a5ca6-dc41-4209-afb8-1f1753ca6e0d (3ms)
[percy:core:discovery] -> Serving root resource (0ms)
[percy:core:discovery] Handling request: http://admin.vendr.localhost:40193/packs-test/css/admin2-d9ae6189.css (24ms)
[percy:core:discovery] -> Resource cache hit (0ms)
[percy:core:discovery] Handling request: http://admin.vendr.localhost:40193/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaWxoTldZeFpEVXdNeTA1TVROakxUUTNOamd0T1RoaU1pMW1NV0V4TURBeE5XSm1NalFHT2daRlZBPT0iLCJleHAiOm51bGwsInB1ciI6ImJsb2JfaWQifX0=--604a4fec9f188de28f8205ea74cad8fde425fa32/avatar.png (5ms)
[percy:core:discovery] -> Resource cache hit (1ms)
[percy:core:discovery] Handling request: http://admin.vendr.localhost:40193/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaWt3WldKa01qTXdZaTAxWlRVM0xUUTFOR1l0T0RNek55MWhObU01TXpJMll6Y3lNVE1HT2daRlZBPT0iLCJleHAiOm51bGwsInB1ciI6ImJsb2JfaWQifX0=--275f756a9e8f90a794e1f680a7e1941180df5c86/avatar.png (1ms)
[percy:core:discovery] -> Resource cache hit (0ms)
[percy:core:discovery] Handling request: http://admin.vendr.localhost:40193/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaWxtWmpjMU1EWTRNaTFqWWpsa0xUUTNNRFV0WVRsalpTMDVZelkxWXpabE5UWXdZek1HT2daRlZBPT0iLCJleHAiOm51bGwsInB1ciI6ImJsb2JfaWQifX0=--83b23733611ca2f99b6f0f27164db8e564669b16/avatar.png (0ms)
[percy:core:discovery] -> Resource cache hit (0ms)
[percy:core:page] Page navigated (38ms)
[percy:core:network] Wait for 100ms idle (1ms)

[Robdel12]

👋🏼 Hey @agrobbin! The fonts aren't requested in this snapshot. It looks like your network idle timeout is set to the default 100ms ([percy:core:network] Wait for 100ms idle (1ms)). Let's up that to 250ms-300 so asset discovery waits long enough for the captured DOM to request the font https://docs.percy.io/docs/cli-configuration#discovery

[agrobbin]

Interesting, thanks for the guidance here @Robdel12! We were using the default networkIdleTimeout, but I can definitely bump it to 250ms. Is it surprising to you that this seems to have been a recent occurrence for us?

I'm going to try this on a branch, and re-run it a few times to see what happens. Stand by!

[agrobbin]

So far, so good, thanks @Robdel12!

[Robdel12]

Awesome to hear! 🎉 It's not uncommon to have to up the network-idle-timeout for icon fonts. Especially if they're loaded via js or CSS, it could take a moment for the request to be made. Asset discovery will wait for zero requests to be made within that timeout. So if no network requests were made within 100ms, asset discovery will close up for that snapshot.