TabSheet blinks sometimes if it contains FormLayout

[KremnevDmitry]

Description

I add a TabSheet component to a Dialog window, then add two tabs with FromLayout as content.
When switching tabs, the dialog window sometimes blinks (see attached video).

Screen.Recording.2024-09-05.at.17.07.04.mov

Only Google Chrome browser is affected. Cannot be reproduced in Safari Version 17.6 (19618.3.11.11.5)).

Expected outcome

Tabs switch without blinking

Minimal reproducible example

    public MainView() {
        Dialog test = new Dialog("Test");

        TabSheet tabSheet = new TabSheet();
        tabSheet.setWidthFull();
        tabSheet.add("Tab1", createFormLayout());
        tabSheet.add("Tab2", createFormLayout());

        test.add(tabSheet);

        Button openDialog = new Button("Open dialog", __ -> test.open());
        add(openDialog);
    }

    private FormLayout createFormLayout() {
        FormLayout formLayout = new FormLayout();

        for (int i =0; i < 4; ++i) {
            TextField textField = new TextField();
            textField.setWidthFull();
            formLayout.add(textField);
        }

        return formLayout;
    }

Steps to reproduce

Use the attached code snippet to reproduce.

Environment

Flow: 24.4.6
Vaadin: 24.4.10
Java: Amazon.com Inc. 17.0.9
OS: aarch64 Mac OS X 14.6.1
Browser: Chrome/128.0.6613.119

Browsers

Chrome

[web-padawan]

Confirmed also in the web component using the following example:

<vaadin-dialog></vaadin-dialog>

<vaadin-button>Open dialog</vaadin-button>

<script type="module">
  import '@vaadin/dialog';
  import '@vaadin/button';
  import '@vaadin/tabsheet';
  import '@vaadin/form-layout';
  import '@vaadin/text-field';

  const dialog = document.querySelector('vaadin-dialog');

  dialog.renderer = (root) => {
    if (root.firstChild) {
      return;
    }

    const sheet = document.createElement('vaadin-tabsheet');
    root.appendChild(sheet);

    sheet.innerHTML = `
      <vaadin-tabs slot="tabs">
        <vaadin-tab id="tab-1">Tab 1</vaadin-tab>
        <vaadin-tab id="tab-2">Tab 2</vaadin-tab>
      </vaadin-tabs>

      <vaadin-form-layout tab="tab-1">
        <vaadin-text-field label="Field 1"></vaadin-text-field>
        <vaadin-text-field label="Field 2"></vaadin-text-field>
        <vaadin-text-field label="Field 3"></vaadin-text-field>
        <vaadin-text-field label="Field 4"></vaadin-text-field>
      </vaadin-form-layout>
      <vaadin-form-layout tab="tab-2">
        <vaadin-text-field label="Field 1"></vaadin-text-field>
        <vaadin-text-field label="Field 2"></vaadin-text-field>
        <vaadin-text-field label="Field 3"></vaadin-text-field>
        <vaadin-text-field label="Field 4"></vaadin-text-field>
      </vaadin-form-layout>
    `;
  }

  const button = document.querySelector('vaadin-button');
  button.addEventListener('click', () => {
    dialog.opened = true;
  });
</script>

[web-padawan]

The issue appears to be similar to the one previously fixed for Board in #5005 (which was also related to toggling visibility by switching Tabs). The difference is that in case of Board it was incorrectly calculating flex-basis and in FormLayout its width set to 99.9% on every field when not visible, and then back to 49.5% when visible again (and cause jump).

Tested manually and the fix from vaadin/web-components#5840 also helps vaadin-form-layout. I'll make a PR.