Javascript.RU

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

Рендеринг страницы в самый неподходящий момент
Есть на странице небольшие фрагменты типа
<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.
Ответить с цитированием
  #2 (permalink)  
Старый 25.11.2021, 13:38
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,743

Ну не знаю, как тут сделать нормальные картинки, поэтому кидаю zip.
Там 4 зтп
Вложения:
Тип файла: zip Desktop.zip (811.8 Кб, 0 просмотров)
Ответить с цитированием
  #3 (permalink)  
Старый 25.11.2021, 14:59
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,209

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

или
visibility: hidden;

?
Ответить с цитированием
  #4 (permalink)  
Старый 25.11.2021, 14:59
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,209

Сообщение от voraa
hidden=false
Или это вообще стейт меняется, а страница рендерится?
Ответить с цитированием
  #5 (permalink)  
Старый 25.11.2021, 15:09
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,743

Сообщение от 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 не скачет с места на место.)
Ответить с цитированием
  #6 (permalink)  
Старый 25.11.2021, 15:12
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,743

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

Последний раз редактировалось voraa, 25.11.2021 в 15:16.
Ответить с цитированием
  #7 (permalink)  
Старый 25.11.2021, 15:24
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,209

Сообщение от voraa
Рендеринг, не в том смысле, как у реакта
Вот это и хотел уточнить.

voraa, а если прятать не
Сообщение от voraa
*[hidden] {display:none !important;}
А именно
Сообщение от voraa
visibility: hidden;
Тогда браузер все отрендерит даже у скрытого элемента. Тем паче что он
Сообщение от voraa
absolute

Т.о. он просто покажется и "дергатни" наверное не будет.
Ответить с цитированием
  #8 (permalink)  
Старый 25.11.2021, 15:48
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,743

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

Попробую и то и то.
Ответить с цитированием
  #9 (permalink)  
Старый 25.11.2021, 15:54
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,209

Сообщение от voraa
Т.е. на страницы буду висеть невидимые абсолютные дивы....
Все верно
Ответить с цитированием
  #10 (permalink)  
Старый 25.11.2021, 17:20
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,743

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

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

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

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перенос текста из одной страницы сайта в форму другой страницы D-Nik Lubny Общие вопросы Javascript 0 18.03.2018 22:16
всплывающее окно , которое появляется при скроле в самый низ страницы Pluha Events/DOM/Window 1 28.10.2014 18:07
проверка открытой страницы. Т.е. активна ли она в данный момент. titan68 Events/DOM/Window 8 06.07.2012 15:16
chrome firebug lite и прокрутка страницы в самый низ cmygeHm Общие вопросы Javascript 3 28.02.2012 14:34
Рендеринг страницы Wordhazard Events/DOM/Window 0 07.11.2009 13:04