Today I came across a rather peculiar issue and was wondering if anyone else had experienced it and found a solution. The problem is pretty straightforward - when I load up my Vue component with a dialog element from the Element-UI library, the background color behind the dialog transitions from its normal greyish tone to a complete black and then back to grey. Normally, there should be a smooth animation from white to greyish and back to white when the dialog appears and disappears. I've included my code below along with two screenshots for better visualization.
<template>
<div>
<el-dialog
title="Choose a month to pre-load"
:visible.sync="dialog"
width="40%"
center>
<p>You can choose to load now the data you are going to use throughout the session. Just pick a month</p>
<div class="block">
<el-date-picker
v-model="choosenMonth"
type="month"
placeholder="Pick a month">
</el-date-picker>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="loadMonth()">Confirm</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialog: true,
choosenMonth: '',
};
}
}
</script>
https://i.sstatic.net/8x9O2.gif
I didn't include any styles since I haven't applied any to the dialog. As you can see, I've written all three sections (template, script, and style) in the same file as a component.
If anyone has even the slightest idea about what's causing this issue, please share your suggestions. Thank you in advance!
EDIT
I replaced the two images with a gif as it better illustrates the situation.