[Severity] Showing black border after page refreshed

[Paper-Folding]

Here I write a quick code sandbox for this issue(the link provided below might sometimes got unstable and show you an import module error, just refresh the page should be ok), can anyone pls help me:
https://codesandbox.io/s/floating-vue-black-border-ofd718?file=/src/App.vue

Normal state

After page refreshed:

My code(simplified)

<template>
    <VMenu
        strategy="fixed"
        :triggers="['focus']"
        :showTriggers="triggers => [...triggers, 'hover', 'click']"
        :hideTriggers="triggers => [...triggers, 'click']"
        :skidding="-40"
    >
        <img :src="avatarSrc" class="avatar" />
        <template #popper>
            <div>Nothing special</div>
        </template>
    </VMenu>
</template>

<script>
import { Menu as VMenu } from 'floating-vue';
import "floating-vue/dist/style.css";
export default {
    components: {
        VMenu
    }
}
</script>

Happening every where:

Plus
I'm using bootstrap 5 style sheet from global import

Help
Is it only me has this issue?

[Akryum]

This is due to improved a11y of floating-vue. What you are seeing is the focus outline rendered by the browser. To remove it:

.v-popper__popper {
  outline: none;
}

[AlotOfBlahaj]

same question.
Thank you

This is due to improved a11y of floating-vue. What you are seeing is the focus outline rendered by the browser (浏览器) . To remove it:

.v-popper__popper {
  outline: none;
}