I am experiencing unexpected behavior with flexbox and the gap property. To my surprise when I "refresh" the DOM by removing the element and adding it back everything works as expected. This leads me to believe that the first paint bugs out somehow and when I "force reload" it fixes itself.
The issue is with a simple inline-flex element that contains inline words and an absolutely positioned span between the first two. The gap is applied between the first two words but I shouldn't be, since they aren't actual block children elements. Without the span the gap is not created.
The GIF below shows the strange behavior best. What is going on here and is there any way to fix it?
HTML
<div> Left <span class="show-for-sr">sr label </span>Right with SR label</div><br><div> Left Right without SR label</div>CSS
.show-for-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;}div { position: relative; display: inline-flex; align-items: center; gap: 3.5em;}