Javascript-форум (https://javascript.ru/forum/)
-   Мобильный JavaScript (https://javascript.ru/forum/mobile/)
-   -   Рендеринг страницы в самый неподходящий момент (https://javascript.ru/forum/mobile/83373-rendering-stranicy-v-samyjj-nepodkhodyashhijj-moment.html)

voraa 25.11.2021 13:33

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

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

ksa 25.11.2021 14:59

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

или
visibility: hidden;

?

ksa 25.11.2021 14:59

Цитата:

Сообщение от voraa
hidden=false

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

voraa 25.11.2021 15:09

Цитата:

Сообщение от ksa
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 25.11.2021 15:12

Цитата:

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

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

ksa 25.11.2021 15:24

Цитата:

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

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

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

Сообщение от voraa
*[hidden] {display:none !important;}

А именно
Цитата:

Сообщение от voraa
visibility: hidden;

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

Сообщение от voraa
absolute


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

voraa 25.11.2021 15:48

Цитата:

Сообщение от ksa
visibility: hidden;

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

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

ksa 25.11.2021 15:54

Цитата:

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

Все верно :yes:

voraa 25.11.2021 17:20

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

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

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

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

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


Часовой пояс GMT +3, время: 14:05.