Рендеринг страницы в самый неподходящий момент

[voraa]

Есть на странице небольшие фрагменты типа

<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)

И как с этим бороться?

[voraa]

Ну не знаю, как тут сделать нормальные картинки, поэтому кидаю zip.
Там 4 зтп

[ksa]

voraa, а cite скрыт как

display: none;

или

visibility: hidden;

?

[ksa]

hidden=false

Или это вообще стейт меняется, а страница рендерится?

[voraa]

voraa, а cite скрыт как
display: none;

или
visibility: hidden;

?

cite не скрыт и виден. Но в нем, как дочерний элемент <div class=popup hidden>
См код html в первом посте.
Этот div определен с position:absolute, и его надо то показывать, то убирать
hidden в стилях всех браузеров определен, как
*[hidden] {display:none;}
Я его дополнительно переопределяю
*[hidden] {display:none !important;}

Подобного рендеринга не происходит на десктопе. Только на мобильном. (ну может и происходит, но cite не скачет с места на место.)

[voraa]

Или это вообще стейт меняется, а страница рендерится?

Стейт меняется у div. Но он absolute, да еще там и z-index есть, и по идее это не должно затрагивать другие элементы.
Рендеринг, не в том смысле, как у реакта, а как внутренняя работа браузера, пересчет стилей, позиционирование и отрисовка страницы.

[ksa]

Рендеринг, не в том смысле, как у реакта

Вот это и хотел уточнить.

voraa, а если прятать не

*[hidden] {display:none !important;}

А именно

visibility: hidden;

Тогда браузер все отрендерит даже у скрытого элемента. Тем паче что он

absolute

Т.о. он просто покажется и "дергатни" наверное не будет.

[voraa]

visibility: hidden;

Т.е. на страницы буду висеть невидимые абсолютные дивы....
Может и сработает.
Я уж хотел попробовать выкидывать их куда-нибудь с глаз долой.
Типа style.left = - 1000px;
А когда надо возвращать в нужное место.

Попробую и то и то.

[ksa]

Т.е. на страницы буду висеть невидимые абсолютные дивы....

Все верно

[voraa]

Сработало и то и то

Правда другие какие то проблемы появились
Этот <citе> теперь изначально рендерится в смещенном состоянии.
Т.е.

бла-бла бла [16
], бла-бла-бла

Но занимает он теперь две строки. Т.е как будто за текстом "16" есть еще какой то пустой узел, который перенесся на следующую строку.
Нет там кроме этого div никаких узлов.
Ну в результате div показывается на строчку ниже.
Вроде не смертельно. Но может и пересчитывать его top придется.

С мобильниками ваще все не просто.
Вот получил я этот див, перешел по ссылке, которая в нем, потом вернулся. А див висит. Не было события mouseleave при переходе.
И как его убрать - пользователю еще додуматься надо.
Или мне...