I need to scroll to get correct position

Hi Guys,
I've created a popover component using the popper js, but always initial position is redering wrong. To fix the position i need to scroll so after to interect with the DOM the position change and become perfect.
I'm using classes, fade-in & fade-out to control the visibility follow below the classes.
The animations are using opacity to looks smoother.

`&.fade-in {
animation: fade-in 0.5s ease;
visibility: visible;
}
`
`&.fade-out {
animation: fade-out 0.5s ease;
visibility: hidden;
}`

Before scroll:

After scroll:

Someone have faced it before or has some idea how to solve it?