Разница визуализации между Chrome и Chrome для Cypress Test Runner (Angular)

Question

Веб-приложение, отображаемое в обычном Chrome (последняя версия 79.0.3945.88) по сравнению с приложением в Chrome с использованием Cypress Test Runner (Chrome 79, увеличение 67%) показывает разницу с раскрывающимся списком Angular компонента. Откуда эта разница и как мы можем ее исправить?

Предоставлено Chrome (правильно):

Отображается в Chrome с помощью Cypress Test Runner:

Соответствует HTML и CSS из компонента раскрывающегося списка:

<div class="body">
  <div class="caption" [class.focused]="focused">{{caption}}</div>
  <form class="input" [formGroup]="selectGroup">
    <div class="background" [class.background-n]="expanded">
      <select #selectElm [attr.ta-id]="taId" formControlName="selectItem" (focus)="onSelectFocus()" (focusout)="onSelectFocusout()" (change)="onSelectChange()"
              class="form-control pointer select-style" (click)="onClick()">
        <option *ngIf="defaultOption && defaultOption.length > 0" selected disabled value="">{{defaultOption}}</option>
        <option *ngFor="let item of list" [value]="valueSelectorFn(item)">{{textSelectorFn(item)}}</option>
      </select>
    </div>
  </form>
</div>

.body {
  width: 100%;
  height: 72px;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 18px 6px 44px;
}

.caption {
  grid-column: 1;
  grid-row: 1;
}

.input {
  grid-column: 1;
  grid-row: 3;
}

.select-style {
  width: 100%;
  height: 48px;
  padding-left: 12px;
  padding-right: 60px;
  border: none;
  box-shadow: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: 0.3px;
  outline-width: 0;
}
  .select-style:focus {
    border: solid 2px var(--control-focus-color);
    border-radius: 3px;
  }

.background {
  background: var(--url-icon-combobox-start) no-repeat;
  background-size: 3px;
  background-position: 0px;
  position: relative;
}
  .background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 48px - 3px);
    height: 48px;
    margin-left: 3px;
    margin-right: 48px;
    background: var(--url-icon-combobox-middle);
    background-repeat: repeat;
    display: block;
    z-index: -1;
  }

  .background:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    background: var(--url-icon-combobox-arrow);
    background-repeat: no-repeat;
    display: block;
    z-index: -1;
  }

  .background-n:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    background: var(--url-icon-combobox-arrow);
    background-repeat: no-repeat;
    display: block;
    z-index: -1;
    transform: scaleY(-1);
    filter: FlipV;
  }

.focused {
  color: var(--control-focus-color);
}