Blurry label of options on Full HD screen on SOME instances.

Vue Version: vue@3.2.31
Vue Select Version: vue3-select@1.0.8

Describe the bug On 4k screen on SOME vue-select components the text of expanded options is clear. On Full HD or 2k screen the text gets blurry (see screenshot).

Reduced code of the template:

<div id='form'>
    <div class="flexbox">
        //THIS COMPONENT DISPLAYS JUST FINE
          <div id='type'>
            <label for="type">Type:</label> 
            <v-select name="type" label="label" :reduce="option=>option.value" v-model="formObject.eventType" :options="EventTypes" :disabled="update"/>
        </div>
       <div id="timeFields">
           <div id="timezone">    
                <label for="timezone" v-if="formObject.eventType!=City">Timezone:</label>
                  //THIS COMPONENT DISPLAYS WRONG
                <vSelect name="timezone" label="name" v-model="formObject.timezone" :options="availibleTimezones" @input="timezoneChange(item,$event)" v-if="formObject.eventType!=City"/>
      </div>
  </div>
</div>

I tried reducing the timezones to id, using only array of name in the options etc. nothing seems to work. Relevant CSS

#form{
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  color: black;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  line-height: 30px;
  padding: 20pt;
  border-radius: 10px;
  width: 50%;
  max-height: 90%;
  overflow-y: scroll;
}

.flexbox{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
}

#type{
  width: 47%;
}

#timeFields{
  background-color: #eaf9ff;
  flex-wrap: wrap;
  display: inherit;
  width: 100%;
  padding: 15px;
  column-gap: 10px;
}

#timezone{
  width: 47%;
}

Relevant TypeScript code:

//EventTypes optionset
export var EventTypes : Array<SelectOption> = [
    new SelectOption(0, "Appointment"),
    new SelectOption(1, "Travel"),
    new SelectOption(2, "Accomodation"),
    new SelectOption(3, "City"),
]

//SelectOption class
export class SelectOption{
    value : number
    label : string
    constructor(
        value : number,
        label : string
    ){
        this.value = value
        this.label = label
    }
}

//Part of timezones option set
export var Timezones : Array<Timezone> = [
    new Timezone(0,"Dateline Standard Time","GMT-12",-720),
    new Timezone(1,"Samoa Standard Time","GMT+13",780),
    new Timezone(2,"Hawaiian Standard Time","HST",-600),

//Timezone class
export class Timezone{
    id : number
    name : string
    code : string
    offset : number
    constructor(
        id : number,
        name : string,
        code : string,
        offset : number
    ){
        this.id = id
        this.name = name
        this.code = code
        this.offset = offset
    }
}

Steps To Reproduce Create vue select 3 control. Open the vue project on a FullHD screen and expand options. The text is blurry. It does only on some vue-selects but I couldn't find the common denominator. Does anyone else have this problem? I'm pretty lost on what could the issue be.

Expected behavior Text should be clear on all resolutions and the behavior should be consistent.

Screenshots

sagalbot / vue-select

Blurry label of options on Full HD screen on SOME instances. #1651