offsetWidth does not match visible element width

I am running into a very confusing issue when measuring the width of a button using offsetWidth.

I am using Vue 3 and Quasar (q-btn). Visually, the button looks completely correct and the text I am trying to display on it is rendered on a single line. However, when I measure the width via offsetWidth, the value is incorrect for labels with spaces.

I have tried this with many different lengths of strings. The problem seems to be the space. When I inspect the Button via dev Tools the width of the Button is correct. It just doesnt transfer right into my code.

Here are some code snippets, to better understand this Problem:

<template> <div ref="buttonRef" class="absolute"> //I have to use absolute here <q-btn label="hello world" flat /> </div> </template> <script setup lang="ts"> import { ref, onMounted, nextTick } from 'vue' const buttonRef = ref<HTMLElement | null>(null) onMounted(async () => { await nextTick() console.log('offsetWidth:', buttonRef.value?.offsetWidth) console.log('scrollWidth:', buttonRef.value?.scrollWidth) console.log('scrollWidth:', buttonRef.value?.clientWidth) }) </script>

All of my console logs display the same wrong widths I showed in the Table above.

Things I already checked:
- The label is rendered inside a single <span>
- No visible text wrapping (button looks single-line)
- Tried forcing: white-space: nowrap;

Expected behaviour:
The measured width should reflect the actual visual width of the button, regardless of whether the label contains spaces.