鼠标移过屏幕触发闪烁，position fixed、z-index 9999相关弹窗开发问题

故障1：鼠标移动屏幕闪烁修复 #

• 核心原因是当前弹窗的z-index属性被注释，挂载在footer之后的弹窗层级低于页面其他可交互元素，鼠标移动时会触发频繁的层级重绘导致闪烁，同时fixed定位元素未开启硬件加速也会加重这个问题。
• 修复后的弹窗基础样式：

.popup {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(black, .7);
    z-index: 9999; // 取消注释，保证弹窗层级最高
    // 新增硬件加速相关配置，避免重绘闪烁
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

故障2：弹窗内图片无法调整尺寸/设置样式修复 #

你使用BEM命名规范，需要为弹窗内的图片定义对应的子元素选择器，保证样式优先级高于全局img样式：

1. 给弹窗内部的img标签添加类名 popup__img
2. 新增对应SCSS样式：

.popup__img {
    // 自定义尺寸规则，可按需调整
    max-width: 90%;
    max-height: 80vh;
    width: auto;
    height: auto;
    // 自定义其他样式示例
    display: block;
    margin: 24px auto;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
}

如果样式仍未生效，可检查全局img样式是否存在!important标记，或者调整选择器优先级即可。

内容的提问来源于stack exchange，提问作者JennyB