HTML-элементы мигают, когда курсор находится между ними

Question

Когда я перемещаю курсор между этими двумя элементами (где-то ниже A и выше B), они оба начинают мигать. Он лучше работает в Chrome, но в Firefox он также мигает в определенных положениях. Иногда нужно показать контекстное меню, чтобы начать мигать. Он мигает, даже когда я не двигаю мышь. Вот как это выглядит:

body {
    /* This is just to make sure it is not 
    caused by text selection cursor having
    active point in different place than 
    default cursor */
    cursor: default;
}
main div {
    height: 0.7cm;
    font-size: xx-large;
    opacity: 0.5;
}
main div:hover {
    opacity: 1;
}

<main>
    <div>A</div>
    <div>B</div>
</main>