Как устранить странный визуальный сбой, который появляется только в ChromeCSS

Разбираемся в CSS
Ответить
Anonymous
 Как устранить странный визуальный сбой, который появляется только в Chrome

Сообщение Anonymous »

Я работаю над пользовательским интерфейсом, в котором есть несколько перекрывающихся слоев. Они обрабатываются довольно просто с использованием z-index и Position:fixed. Вот пример пользовательского интерфейса:
Изображение

Существует элемент типа «ящик», который имеет фиксированное положение и использует z-индекс, чтобы он отображался как перекрывающийся слой на странице. В целом все работает так, как ожидалось, за исключением Chrome, где могут появляться странные визуальные артефакты, особенно заметные при изменении размера окна:
[img]https:// i.sstatic.net/ReHOG.jpg[/img]

Части страницы «под» ящиком можно увидеть выглядывающими в несколько случайном порядке. При изменении размера окна эти «вырезы» появляются в довольно хаотичном порядке.
Проблема также имеет ненадежный характер. Иногда он присутствует, а затем после обновления страницы не происходит в течение нескольких часов или дней (без каких-либо изменений кода). Из-за этого довольно сложно выявить причины или исправить их.
Я обнаружил, что могу запустить его снова, отключив аппаратное ускорение Chrome, перезапустив его, а затем снова включив. Возможно, это признак того, что он связан с графическим процессором?
В этом пользовательском интерфейсе может быть связано множество переменных (это довольно сложное веб-приложение), и я не знаю Я не ожидаю, что кто-то предложит немедленное решение, но мне любопытно, как можно начать отлаживать подобную проблему. Я никогда раньше не видел подобных графических сбоев (я даже не уверен на 100%, как описать фактические появление артефактов), и мне не известно ничего в инструментах разработки Chrome, которые могли бы помочь кому-то диагностировать то, что кажется ошибка, выходящая за рамки CSS или HTML.

Подробнее здесь: https://stackoverflow.com/questions/766 ... -in-chrome
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»