Chrome下position:fixed搭配100vh的模态框背景显示异常求协助

问题描述 #

• 个人作品集网站的模态框组件，触发后本该全屏覆盖的遮罩层仅显示在页面上部、保持全宽，无法纵向铺满整个视口
• 已为遮罩层类.modal-bg配置position: fixed、height: 100vh属性，通过flex布局实现模态框内容居中对齐
• 该样式在其他主流浏览器中运行正常，仅Chrome浏览器出现渲染异常

对应代码片段 #

HTML结构 #

<div class="modal-bg">
    <div class="box-container">
        <div class="img-box">
            <img src="">
        </div>
        <div class="caption">
            <p>Some Text here</p>
            <div class="btns">
                <a href="#">btn-1</a>
                <a href="#">btn-2</a>
            </div>
        </div>
    </div>
</div>

SCSS样式 #

.modal-bg {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease-in;

    .box-container {
        position: relative;
        background-color: #f2f2f2;
        width: 80%;
        height: 60rem;
        max-width: 82rem;
        min-height: 45rem;
        border-radius: 32px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;

        .img-box {
            margin: 0 .8rem;
            height: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            
            img {
                max-width: 53rem;
                width: 100%;
            }
        }

        .caption {
            position: relative;
            width: 100%;
            justify-self: flex-end;
            font-size: 1.8rem;
            color: #000000;
            font-weight: normal;
            padding: 2rem;
            background-color: #ffffff;

            .btns {
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin: 1rem 0;
                
                a {
                    line-height: 2.4rem;
                    color: black;
                    font-size: 1.4rem;
                    display: flex;
                    text-transform: uppercase;
                    padding: .8rem;
                    background-color: #ffffff;
                }
            }
        }
    }
}

问题原因与解决方案 #

• 排查祖先元素的包含块干扰：Chrome的渲染规则是，如果祖先元素设置了transform、filter、backdrop-filter、perspective、will-change: transform这类属性，会把该元素作为内部position: fixed元素的定位参考，不再以视口为定位基准，直接导致遮罩层高度计算错误。处理方式是把模态框节点移到这些带特殊属性的元素外面，直接挂在<body>下即可。
• 换高度计算逻辑避开100vh的兼容坑：Chrome计算100vh时，会把可自动收起的地址栏高度纳入计算值，最后实际显示的高度会比视口矮一截，视觉上就像遮罩层只铺了页面上半部分。可以直接删掉原来的height:100vh，给遮罩层加top:0; bottom:0，靠上下定位实现铺满，这种写法在所有浏览器的固定定位场景下表现完全一致。
• 先修正语法错误再验证效果：原代码里的<a href="#>btn-2</a>少了个闭合的双引号，这类语法错误有时会打乱后续CSS的解析顺序，先把这类基础问题改完，再排查样式异常。

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