Показать сообщение отдельно
  #1 (permalink)  
Старый 25.11.2021, 13:33
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,693

Рендеринг страницы в самый неподходящий момент
Есть на странице небольшие фрагменты типа
<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)

И как с этим бороться?
Изображения:
Тип файла: jpg s1.jpg (16.4 Кб, 6 просмотров)
Тип файла: jpg s2.jpg (16.1 Кб, 4 просмотров)
Тип файла: jpg s3.jpg (16.3 Кб, 3 просмотров)
Тип файла: jpg s4.jpg (15.3 Кб, 4 просмотров)

Последний раз редактировалось voraa, 25.11.2021 в 13:38.
Ответить с цитированием