Блог

Главная - Вопросы по программированию - Моя всплывающая форма продолжает мерцать (Windows, Chrome)

Моя всплывающая форма продолжает мерцать (Windows, Chrome)

#html #flicker #angular10 #vmware-clarity

#HTML #мерцание #angular10 #vmware-ясность

Вопрос:

Мое всплывающее диалоговое окно продолжает мерцать, диалоговое окно появляется в iframe . Среда выглядит следующим образом,

 System: Windows only
Browser: Chrome only
Frontend Framework: 
   "@angular/core": "~10.1.5",
   "@clr/angular": "^4.0.3",
   "@clr/core": "^4.0.3",

Короткое видео по этой проблеме:
https://1drv.ms/v/s !Ap72n_DJE-rduGOfzwanngXcqGjP?e= Q2SaCw

Мое предположение, 1. Время загрузки выглядит хорошо, поэтому это не должно быть проблемой с производительностью. 2. Кодовая база одинакова для моей тестовой / промежуточной / рабочей среды, поэтому это не должно быть проблемой, связанной с кодом. 3. Проблема иногда возникает в chrome only , windows only , и только для нашей промежуточной среды. Похоже, это проблема, связанная с env. 4. Я могу воспроизвести проблему случайным образом, и нет регулярного шаблона.

Кстати, всплывающее окно — это наш сервис, который в некотором роде интегрирован с другими сервисами iframe .

Мне нужно несколько предложений о том, как устранить проблему.

Спасибо за любой комментарий.

Комментарии:

1. Не забудьте упомянуть, что всплывающее диалоговое окно мерцает при перемещении мыши. Пользовательский интерфейс будет оставаться неподвижным, когда мышь перестанет двигаться.

2. Воспроизводится ли она на компьютерах с разными типами графических процессоров? Используете ли вы какие-либо ультрасовременные функции CSS, которые в значительной степени зависят от обработки на GPU, такие как WebGL, WebGPU или какие filter -либо свойства CSS? Вы сказали, что диалоговое окно существует в an iframe , но содержит ли диалоговое окно an iframe ? Выполняется ли iframe в том же источнике, что и родительская веб-страница? (фреймы iframe имеют разный рендеринг при пересечении источников — например, фрейм iframe одного и того же источника можно сделать бесшовным , например, часть родительской страницы с прозрачным или размытым фоном, вы не можете этого сделать с фреймами iframes разных источников).

3. Спасибо за ответ. Проблема может быть воспроизведена только в некоторой системе Windows, поэтому она не может быть вызвана другим графическим процессором. я проверяю, вызвано ли это какой-либо ультрасовременной функцией CSS

4. Спасибо @Dai, наконец-то проблема была решена путем добавления следующего стиля, даже если у нас нет основной причины для этого. css body{ opacity: 0; animation: page-fade-in .2s forwards; } @keyframes page-fade-in { 0% { opacity: 0 } 100% { opacity: 1 } }

Ответ №1:

Для меня это похоже на повреждение графики. Проверьте, что драйверы вашего графического процессора обновлены, и попробуйте запустить Chrome с отключенным аппаратным ускорением.