Found in

• 106.0b5 (20220927185813)

Affected versions

• 106.0b5 (20220927185813)
• 107.0a1 (20220929014928)

Tested platforms

• Affected platforms: Windows 10x64, Ubuntu 20.04, macOS 11.6
• Unaffected platform: none

Steps to reproduce

1. Open about:welcome page.
2. Select the Skip this step option until the Choose the color that inspires you is displayed.
3. Change the colors and observe the Set and continue button.

Expected result

• The colors are changed and no visual issues occur.

Actual result

• Set and continue button rapidly changes position.

Additional notes

• Attached a screen recording.
• On Ubuntu 20.04 and macOS 11 the issue is intermittent. On Windows, the issues happen almost anytime when changing colors.

I guess it's a Fluent issue like bug 1737951 - the node is rendered synchronously, the text content is translated asynchronously. There's a way to force translation synchronously, but idk how easily it fits into the react component structure we have here.

One reasonable solution would be to set a minimum height for the description box. Even if we didn't have that problem, I think this might still be worthwhile, because in most languages the description will be 1 row tall for the "Use my current colors" option, and 2+ rows tall for the Colorway options. So when switching between them, the primary button will move up and down, even if the description content didn't flicker.

I think this would work, if we want to go in that direction:

.onboardingContainer .screen[pos="split"] .tiles-theme-container .colorway-text {
  min-height: 3em;
}

NI @Ania to help set priority on the issue thanks

This came up at our "pixel-perfect" walkthrough with Gabrielle too - it's a small thing, but IMO the flicker is unpleasant enough to set the min height for description box in 107.

NI @asafkoto to review screenshot that allows 3 line desc text by setting min-height to 58.5 px and fixes the jump reported in the bug thanks

https://hg.mozilla.org/mozilla-central/rev/1729f4e93ae9

Verified fixed with Firefox 107.0a1 (20221006093717) on Windows 10x64, macOS 10.15.7 and Ubuntu 20.04. The Set and continue button no longer changes position when the colors are changed usiung Keyboard navigation or mouse.

My apologies, I thought I posted a comment here a while back. The new height looks great, thank you!

The patch landed in nightly and beta is affected.
:aminomancer, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox106 to wontfix.

For more information, please visit auto_nag documentation.

Too late for uplift