Chrome ошибка: при наведении курсора на изменение ширины перед текстовыми полями

Question

У меня есть эта странная ошибка, которая, кажется, появляется только в Chrome Браузере

Я пытаюсь создать форму в Drupal 9 с модулем webform. Вот такой код:

/**
 * @file
 * Webform styles.
 */

/**
 * Element states.
 * @see \Drupal\webform\WebformSubmissionConditionsValidator::buildForm
 * @see \Drupal\webform\Utility\WebformElementHelper::fixStatesWrapper
 * @see \Drupal\webform\Plugin\WebformElement\TextFormat::preRenderFixTextFormatStates
 * @see text-format-wrapper.html.twig
 */
.js-form-item.js-webform-states-hidden,
.js-form-submit.js-webform-states-hidden,
.js-form-wrapper.js-webform-states-hidden,
.js-webform-text-format-hidden > .js-text-format-wrapper {
  display: none;
}

/**
 * Make sure flexbox is always using 'display: flex' when toggled via #states.
 * @see https://stackoverflow.com/questions/38491653/jquery-show-a-flex-box/4121
 */
.webform-flexbox.js-webform-states-hidden[style*="display: block"] {
  display: flex !important;
}

/**
 * Container inline
 */
.form-item .container-inline {
  margin: 2px 0;
}

/**
 * Issue #2731991: Setting required on radios marks all options required.
 */
.form-checkboxes .form-required:after,
.form-radios .form-required:after {
  display: none;
}

/**
 * Element title inline.z
 */
.webform-element--title-inline > label {
  display: inline;
  padding-right: 0.5em;
}

.webform-element--title-inline > div.container-inline {
  display: inline;
}

/**
 * Fieldset title inline.
 * Applies to radios, checkboxes, and buttons. (aka .form-composite)
 * @see \Drupal\webform\Plugin\WebformElement\OptionsBase::prepare
 * @see webform_preprocess_fieldset()
 */
.form-composite.webform-fieldset--title-inline legend {
  float: left; /* LTR */
  margin: 0.4em 0.5em 0.4em 0; /* LTR */
}

[dir=rtl] .form-composite.webform-fieldset--title-inline legend {
  float: right; /* RTL */
  margin-left: 0.5em; /* RTL */
  margin-right: 0; /* RTL */
}

.form-composite.webform-fieldset--title-inline .fieldset-wrapper,
.form-composite.webform-fieldset--title-inline .fieldset-wrapper > div {
  display: inline;
}

/**
 * Checkboxes and radios title inline.
 */
.webform-element--title-inline .form-radios,
.webform-element--title-inline .form-checkboxes {
  display: inline;
}

/**
 * Readonly inputs. (@see .form-disabled)
 * @see https://www.wufoo.com/html5/attributes/21-readonly.html
 */
.webform-readonly input[type="date"],
.webform-readonly input[type="datetime-local"],
.webform-readonly input[type="email"],
.webform-readonly input[type="number"],
.webform-readonly input[type="password"],
.webform-readonly input[type="search"],
.webform-readonly input[type="tel"],
.webform-readonly input[type="text"],
.webform-readonly input[type="time"],
.webform-readonly input[type="url"],
.webform-readonly textarea {
  background: #ededed;
  border-color: #bbb;
  color: #717171;
}



























/* Custom styles */
.theme-webform {
  width: 80%;
  max-width: 800px;
  margin: auto;
}
.theme-webform .form-item:not(.form-wrapper) label {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.18;
  color: #0c6158; }

.theme-webform .webform-type-fieldset {
  margin: 0 auto;
  border: 0px;
  padding: 0; }

.theme-webform.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -webkit-box-align: start;
  align-items: flex-start; }
  .theme-webform.two-cols .webform-required {
    grid-column: 1 / span 2; }

.theme-webform .fieldset-wrapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  flex-wrap: wrap; }

.theme-webform .form-item:not(.form-wrapper) {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 36fr 64fr;
  grid-gap: 10px;
  gap: 10px;
  -webkit-box-align: baseline;
  align-items: baseline; }

.theme-webform .form-item .container-inline {
  display: -webkit-inline-box;
  display: inline-flex; }

.theme-webform .form-item .container-inline .form-item:not(.form-wrapper) {
  display: -webkit-box;
  display: flex;
  padding: 0; }

.theme-webform .form-textarea,
.theme-webform .form-text,
.theme-webform .form-email,
.theme-webform .form-tel,
.theme-webform .form-select {
  border: none;
  background-color: #efefef;
  padding: 10px;
  margin: 5px 0px 5px 0px;
  color: gray;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit; }
  .theme-webform .form-textarea:hover, .theme-webform .form-textarea:focus,
  .theme-webform .form-text:hover,
  .theme-webform .form-text:focus,
  .theme-webform .form-email:hover,
  .theme-webform .form-email:focus,
  .theme-webform .form-tel:hover,
  .theme-webform .form-tel:focus,
  .theme-webform .form-select:hover,
  .theme-webform .form-select:focus {
    border-color: #114f40;
    background-color: #f5f5f5;
    outline: none; }
  .theme-webform .form-textarea .option,
  .theme-webform .form-text .option,
  .theme-webform .form-email .option,
  .theme-webform .form-tel .option,
  .theme-webform .form-select .option {
    color: #707070;
    font-size: 1.4rem;
    line-height: 2.4rem; }
  .theme-webform .form-textarea input[type="radio"],
  .theme-webform .form-textarea input[type="checkbox"],
  .theme-webform .form-text input[type="radio"],
  .theme-webform .form-text input[type="checkbox"],
  .theme-webform .form-email input[type="radio"],
  .theme-webform .form-email input[type="checkbox"],
  .theme-webform .form-tel input[type="radio"],
  .theme-webform .form-tel input[type="checkbox"],
  .theme-webform .form-select input[type="radio"],
  .theme-webform .form-select input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    z-index: -1; }
    .theme-webform .form-textarea input[type="radio"] + label,
    .theme-webform .form-textarea input[type="checkbox"] + label,
    .theme-webform .form-text input[type="radio"] + label,
    .theme-webform .form-text input[type="checkbox"] + label,
    .theme-webform .form-email input[type="radio"] + label,
    .theme-webform .form-email input[type="checkbox"] + label,
    .theme-webform .form-tel input[type="radio"] + label,
    .theme-webform .form-tel input[type="checkbox"] + label,
    .theme-webform .form-select input[type="radio"] + label,
    .theme-webform .form-select input[type="checkbox"] + label {
      position: relative;
      padding-left: 1.8em;
      line-height: 2.4rem;
      margin: 15px 0px; }
      .theme-webform .form-textarea input[type="radio"] + label:before, .theme-webform .form-textarea input[type="radio"] + label:after,
      .theme-webform .form-textarea input[type="checkbox"] + label:before,
      .theme-webform .form-textarea input[type="checkbox"] + label:after,
      .theme-webform .form-text input[type="radio"] + label:before,
      .theme-webform .form-text input[type="radio"] + label:after,
      .theme-webform .form-text input[type="checkbox"] + label:before,
      .theme-webform .form-text input[type="checkbox"] + label:after,
      .theme-webform .form-email input[type="radio"] + label:before,
      .theme-webform .form-email input[type="radio"] + label:after,
      .theme-webform .form-email input[type="checkbox"] + label:before,
      .theme-webform .form-email input[type="checkbox"] + label:after,
      .theme-webform .form-tel input[type="radio"] + label:before,
      .theme-webform .form-tel input[type="radio"] + label:after,
      .theme-webform .form-tel input[type="checkbox"] + label:before,
      .theme-webform .form-tel input[type="checkbox"] + label:after,
      .theme-webform .form-select input[type="radio"] + label:before,
      .theme-webform .form-select input[type="radio"] + label:after,
      .theme-webform .form-select input[type="checkbox"] + label:before,
      .theme-webform .form-select input[type="checkbox"] + label:after {
        content: '';
        position: absolute;
        top: 0.3rem;
        left: 0;
        width: 1.8rem;
        height: 1.8rem;
        box-sizing: border-box; }
      .theme-webform .form-textarea input[type="radio"] + label:before,
      .theme-webform .form-textarea input[type="checkbox"] + label:before,
      .theme-webform .form-text input[type="radio"] + label:before,
      .theme-webform .form-text input[type="checkbox"] + label:before,
      .theme-webform .form-email input[type="radio"] + label:before,
      .theme-webform .form-email input[type="checkbox"] + label:before,
      .theme-webform .form-tel input[type="radio"] + label:before,
      .theme-webform .form-tel input[type="checkbox"] + label:before,
      .theme-webform .form-select input[type="radio"] + label:before,
      .theme-webform .form-select input[type="checkbox"] + label:before {
        border: 1px solid #114f40; }
      .theme-webform .form-textarea input[type="radio"] + label:after,
      .theme-webform .form-textarea input[type="checkbox"] + label:after,
      .theme-webform .form-text input[type="radio"] + label:after,
      .theme-webform .form-text input[type="checkbox"] + label:after,
      .theme-webform .form-email input[type="radio"] + label:after,
      .theme-webform .form-email input[type="checkbox"] + label:after,
      .theme-webform .form-tel input[type="radio"] + label:after,
      .theme-webform .form-tel input[type="checkbox"] + label:after,
      .theme-webform .form-select input[type="radio"] + label:after,
      .theme-webform .form-select input[type="checkbox"] + label:after {
        background-color: #114f40;
        width: .8rem;
        height: .8rem;
        top: 0.8rem;
        left: 0.5rem;
        opacity: 0; }
    .theme-webform .form-textarea input[type="radio"]:focus + label:before, .theme-webform .form-textarea input[type="radio"]:hover + label:before,
    .theme-webform .form-textarea input[type="checkbox"]:focus + label:before,
    .theme-webform .form-textarea input[type="checkbox"]:hover + label:before,
    .theme-webform .form-text input[type="radio"]:focus + label:before,
    .theme-webform .form-text input[type="radio"]:hover + label:before,
    .theme-webform .form-text input[type="checkbox"]:focus + label:before,
    .theme-webform .form-text input[type="checkbox"]:hover + label:before,
    .theme-webform .form-email input[type="radio"]:focus + label:before,
    .theme-webform .form-email input[type="radio"]:hover + label:before,
    .theme-webform .form-email input[type="checkbox"]:focus + label:before,
    .theme-webform .form-email input[type="checkbox"]:hover + label:before,
    .theme-webform .form-tel input[type="radio"]:focus + label:before,
    .theme-webform .form-tel input[type="radio"]:hover + label:before,
    .theme-webform .form-tel input[type="checkbox"]:focus + label:before,
    .theme-webform .form-tel input[type="checkbox"]:hover + label:before,
    .theme-webform .form-select input[type="radio"]:focus + label:before,
    .theme-webform .form-select input[type="radio"]:hover + label:before,
    .theme-webform .form-select input[type="checkbox"]:focus + label:before,
    .theme-webform .form-select input[type="checkbox"]:hover + label:before {
      border-color: #114f40;
      background-color: #114f40; }
    .theme-webform .form-textarea input[type="radio"]:checked + label:after,
    .theme-webform .form-textarea input[type="checkbox"]:checked + label:after,
    .theme-webform .form-text input[type="radio"]:checked + label:after,
    .theme-webform .form-text input[type="checkbox"]:checked + label:after,
    .theme-webform .form-email input[type="radio"]:checked + label:after,
    .theme-webform .form-email input[type="checkbox"]:checked + label:after,
    .theme-webform .form-tel input[type="radio"]:checked + label:after,
    .theme-webform .form-tel input[type="checkbox"]:checked + label:after,
    .theme-webform .form-select input[type="radio"]:checked + label:after,
    .theme-webform .form-select input[type="checkbox"]:checked + label:after {
      opacity: 1; }
  .theme-webform .form-textarea input[type="radio"] + label:before, .theme-webform .form-textarea input[type="radio"] + label:after,
  .theme-webform .form-text input[type="radio"] + label:before,
  .theme-webform .form-text input[type="radio"] + label:after,
  .theme-webform .form-email input[type="radio"] + label:before,
  .theme-webform .form-email input[type="radio"] + label:after,
  .theme-webform .form-tel input[type="radio"] + label:before,
  .theme-webform .form-tel input[type="radio"] + label:after,
  .theme-webform .form-select input[type="radio"] + label:before,
  .theme-webform .form-select input[type="radio"] + label:after {
    border-radius: 50%; }
  .theme-webform .form-textarea input[type="reset"],
  .theme-webform .form-textarea input[type="button"],
  .theme-webform .form-textarea input[type="submit"],
  .theme-webform .form-textarea button,
  .theme-webform .form-text input[type="reset"],
  .theme-webform .form-text input[type="button"],
  .theme-webform .form-text input[type="submit"],
  .theme-webform .form-text button,
  .theme-webform .form-email input[type="reset"],
  .theme-webform .form-email input[type="button"],
  .theme-webform .form-email input[type="submit"],
  .theme-webform .form-email button,
  .theme-webform .form-tel input[type="reset"],
  .theme-webform .form-tel input[type="button"],
  .theme-webform .form-tel input[type="submit"],
  .theme-webform .form-tel button,
  .theme-webform .form-select input[type="reset"],
  .theme-webform .form-select input[type="button"],
  .theme-webform .form-select input[type="submit"],
  .theme-webform .form-select button {
    border: none;
    background-color: #4a4a4a;
    padding: calc(1rem - 1px) calc(3rem - 1px);
    font-size: 1.5rem;
    border-radius: 5px;
    line-height: 2rem;
    color: #ffffff;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    cursor: pointer; }
    .theme-webform .form-textarea input[type="reset"]:hover, .theme-webform .form-textarea input[type="reset"]:focus,
    .theme-webform .form-textarea input[type="button"]:hover,
    .theme-webform .form-textarea input[type="button"]:focus,
    .theme-webform .form-textarea input[type="submit"]:hover,
    .theme-webform .form-textarea input[type="submit"]:focus,
    .theme-webform .form-textarea button:hover,
    .theme-webform .form-textarea button:focus,
    .theme-webform .form-text input[type="reset"]:hover,
    .theme-webform .form-text input[type="reset"]:focus,
    .theme-webform .form-text input[type="button"]:hover,
    .theme-webform .form-text input[type="button"]:focus,
    .theme-webform .form-text input[type="submit"]:hover,
    .theme-webform .form-text input[type="submit"]:focus,
    .theme-webform .form-text button:hover,
    .theme-webform .form-text button:focus,
    .theme-webform .form-email input[type="reset"]:hover,
    .theme-webform .form-email input[type="reset"]:focus,
    .theme-webform .form-email input[type="button"]:hover,
    .theme-webform .form-email input[type="button"]:focus,
    .theme-webform .form-email input[type="submit"]:hover,
    .theme-webform .form-email input[type="submit"]:focus,
    .theme-webform .form-email button:hover,
    .theme-webform .form-email button:focus,
    .theme-webform .form-tel input[type="reset"]:hover,
    .theme-webform .form-tel input[type="reset"]:focus,
    .theme-webform .form-tel input[type="button"]:hover,
    .theme-webform .form-tel input[type="button"]:focus,
    .theme-webform .form-tel input[type="submit"]:hover,
    .theme-webform .form-tel input[type="submit"]:focus,
    .theme-webform .form-tel button:hover,
    .theme-webform .form-tel button:focus,
    .theme-webform .form-select input[type="reset"]:hover,
    .theme-webform .form-select input[type="reset"]:focus,
    .theme-webform .form-select input[type="button"]:hover,
    .theme-webform .form-select input[type="button"]:focus,
    .theme-webform .form-select input[type="submit"]:hover,
    .theme-webform .form-select input[type="submit"]:focus,
    .theme-webform .form-select button:hover,
    .theme-webform .form-select button:focus {
      box-shadow: inset 0 0 0 1px #114f40;
      background-color: #114f40;
      color: #4a4a4a; }

<form class="webform-submission-form webform-submission-add-form webform-submission-expert-database-registration-form webform-submission-expert-database-registration-add-form webform-submission-expert-database-registration-node-20-form webform-submission-expert-database-registration-node-20-add-form two-cols js-webform-submit-once js-webform-details-toggle webform-details-toggle js-webform-autofocus theme-webform" autocomplete="off"  enctype="multipart/form-data" action="#" method="post" accept-charset="UTF-8">

  <fieldset class="js-webform-type-fieldset webform-type-fieldset js-form-item form-item js-form-wrapper form-wrapper">
    <div class="fieldset-wrapper">

      <div class="js-form-item form-item js-form-type-textfield form-item-value1 js-form-item-value1">

        <label for="edit-value1" class="js-form-required form-required">Value 1</label>
        <input type="text" id="edit-value1" name="value1" value="" size="60" maxlength="255" class="form-text required" required="required" aria-required="true">
      </div>
      <div class="js-form-item form-item js-form-type-select form-item-value2 js-form-item-value2">

        <label for="edit-value2">Value 2</label>
        <select id="edit-value2" name="value2" class="form-select">
          <option value="" selected="selected">- None -</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </select>

      </div>

    </div>
      <div class="js-form-item form-item js-form-type-textfield form-item-value3 js-form-item-value3">

        <label for="edit-value3" class="js-form-required form-required">Value 3</label>
        <input type="text" id="edit-value3" name="value3" value="" size="60" maxlength="255" class="form-text required" required="required" aria-required="true">

      </div>
  </fieldset>
  <fieldset class="js-webform-type-fieldset webform-type-fieldset js-form-item form-item js-form-wrapper form-wrapper">
    <div class="fieldset-wrapper">

      <div class="js-form-item form-item js-form-type-textfield form-item-value4 js-form-item-value4">

        <label for="edit-value4" class="js-form-required form-required">Value 4</label>
        <input type="text" id="edit-value4" name="value4" value="" size="60" maxlength="255" class="form-text required" required="required" aria-required="true">
      </div>
      <div class="js-form-item form-item js-form-type-select form-item-value5 js-form-item-value5">

        <label for="edit-value5">Value 5</label>
        <select id="edit-value5" name="value5" class="form-select">
          <option value="" selected="selected">- None -</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </select>

      </div>

    </div>
      <div class="js-form-item form-item js-form-type-textfield form-item-value6 js-form-item-value6">

        <label for="edit-value6" class="js-form-required form-required">Value 6</label>
        <input type="text" id="edit-value6" name="value6" value="" size="60" maxlength="255" class="form-text required" required="required" aria-required="true">

      </div>
  </fieldset>
</form>

Сама форма представляет собой сетку с двумя наборами полей рядом друг с другом. Это работает все отлично, но ...

Если я наведу курсор мыши на поле выбора или сфокусируюсь на нем, ширина входного текстового поля выше изменится. Если я изменю размер окна, ширина вернется к норме.

Это происходит только в Chrome (последняя сборка: 80.0.3987.149). Я на Windows 10.

Я загрузил скринкаст с демонстрацией проблемы:
http://somup.com/cYeqXdhMsB