Chrome与Edge内置PDF查看器切换显示PDF异常问题咨询

问题原因 #

这是Chromium 92及更高版本内置PDF阅读器的已知渲染bug：当使用display: none隐藏PDF嵌入元素时，元素会被从渲染树中移除，再次切回display: block时内置PDF渲染器不会自动触发重绘，因此只会显示灰色视口。手动调整窗口大小时会触发全局重绘，PDF就会恢复正常渲染。

可行解决方案 #

方案1：替换隐藏逻辑，避免使用display: none #

不要将PDF元素的display设为none，改用不触发元素从渲染树移除的隐藏方式：

• 若允许隐藏时保留元素占位：使用visibility: hidden替代
• 若需要隐藏时不占位：使用绝对定位移出可视区域，例如设置position: absolute; left: -10000px; top: -10000px;

方案2：切换显示后手动触发重绘 #

如果必须保留display切换的逻辑，每次将PDF切换为显示状态后，强制触发元素重排即可修复显示问题，不需要修改原有隐藏逻辑，修复后示例代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body style="height: 100vh;">
        <embed id = "a" src="A.pdf" type="application/pdf" style="width: 100%;height: 100%;">
        <embed id = "b" src="B.pdf" type="application/pdf" style="width: 100%;height: 100%;">
        <script>
            setInterval(toggleFunction, 1000);
            let toggle = false;
            function toggleFunction()
            {
                let activeEl;
                if (toggle) {
                    document.getElementById("a").style.display = "none";
                    activeEl = document.getElementById("b");
                    activeEl.style.display = "block";
                }
                else {
                    document.getElementById("b").style.display = "none";
                    activeEl = document.getElementById("a");
                    activeEl.style.display = "block";
                }
                // 强制触发重排修复渲染问题
                activeEl.offsetHeight;
                toggle = !toggle;
            }
        </script>
    </body>
</html>

如果上述代码仍不生效，可以用临时修改缩放值的方式强制重绘，替换上面的重排代码即可：

activeEl.style.zoom = 0.99;
setTimeout(() => activeEl.style.zoom = 1, 0);

方案3：重新赋值src强制重新渲染 #

每次切换显示时重新给PDF嵌入元素的src赋值，会触发PDF重新加载渲染，也可以解决问题，适合PDF文件体积较小的场景：

activeEl.src = activeEl.src;

内容的提问来源于stack exchange，提问作者Jürg Schneider