I maintain a vuejs2 / vuetify 2 project that can’t be updated for current versions due to large codebase, and also I’m slowly migrating this project’s dialogs for a native HTML implementation, I feel UX is way faster when we use the native element in pages that contain heavy resources.
So my question is: Why does the borders of my dialogs look a little different when I use the native element? I prepared 2 codepen samples and screenshots to show the bug:
And here are the URLs: https://codepen.io/lampadinha/pen/yLWbGmw and https://codepen.io/lampadinha/pen/dyEWwBO
Code is similar, basically the dialog requires some extra CSS:
<code><dialog open>
<!-- and -->
<v-dialog max-width="500"
v-model="dialog">
</code>
<code><dialog open>
<!-- and -->
<v-dialog max-width="500"
v-model="dialog">
</code>
<dialog open>
<!-- and -->
<v-dialog max-width="500"
v-model="dialog">