При наведении отображается элемент наложения, но он мигает ⇐ CSS

[Anonymous]

У меня есть холст и наложенный поверх него текст. Я хочу отображать текст только в том случае, если мышь наведена на холст.
Он работает с простым HTML https://codepen.io/Ariel-Ariel-the-bold/pen/MYgvvxZ

Код: Выделить всё

This is a text






.rootc {
display: flex;
}

.container {
flex-grow: 1;
flex: 1;
position: relative;
background-color: green;
}

.div1 {
width: 100%;
background-color: red;
}

.div1:hover ~ .div2 {
display: flex;
}

.div2 {
position: absolute;
background-color: yellow;
top: 0; left: 0; right: 0;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
display: none;
}

но не в приложении vue https://codesandbox.io/p/sandbox/blue-surf-h8gm3l
в приложении vue, это мигает
как мне добиться этого в приложении vue? спасибо

Подробнее здесь: https://stackoverflow.com/questions/793 ... s-blinking