Есть на странице небольшие фрагменты типа
<cite href="#iso4">16<div class="popup" style="width: 311px; left: -9px;" hidden>
<b>ISO 4. Information and documentation — Rules for
the abbreviation of title words and titles of
publications</b>
<br>
<a href="https://www.iso.org/standard/3569.html" class="a-blue">https://www.iso.org/standard/3569.html</a>
</div></cite>
И совсем простенькая задачка - при наведении на эту cite, показать div.popup, который изначально скрыт
Но вот, что происходит в мобильном варианте (это проявляется только в мобильном и только, если cite находится в самом левом краю строки)
Первый рисунок начальное положение
Второй рисунок - нажали на cite, сработал mousenter, дошли до момента, когда надо показывать этот popup. (hidden=false) Пока все нормально.
Третий рисунок - показали popup, и тут браузер делает рендеринг страницы, всего параграфа и cite, несмотря на то, что у popup position:absolute. B после рендеринга cite убегает на строчку вверх и в конец строки. Ну и popup вместе с ней.
Еще прикол в том, что cite убежал, а указатель остался на прежнем месте. Поэтому срабатывает mouseleave (четвертый рисунок). Popup благополучно гасится, и все возвращается на круги своя. (см рис 1)
И как с этим бороться?