fix(ui): disable modal backdrop blur under software rendering (#1092)

With hardware acceleration disabled, Chrome rasterizes in software and a full-viewport backdrop-filter forces a per-frame CPU blur over everything behind the modal, freezing the whole browser. Detect software rendering via the unmasked WebGL renderer string at app startup and drop the backdrop blur in that case. Also route the download modal's sticky toolbar through the shared --modal-backdrop-blur variable instead of a hardcoded blur(8px).
2026-09-21 03:01:27 -03:00 · 2026-09-02 12:24:32 +08:00
parent bc33e32c6f
commit b37238d790
5 changed files with 143 additions and 3 deletions
@@ -12,6 +12,7 @@ import { helpManager } from './managers/HelpManager.js';
 import { doctorManager } from './managers/DoctorManager.js';
 import { bannerService } from './managers/BannerService.js';
 import { initTheme, initBackToTop } from './utils/uiHelpers.js';
+import { applyModalBackdropBlurPolicy } from './utils/renderingCapability.js';
 import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
 import { i18n } from './i18n/index.js';
 import { onboardingManager } from './managers/OnboardingManager.js';
@@ -33,7 +34,11 @@ export class AppCore {
        if (this.initialized) return;

        console.log('AppCore: Initializing...');
-        
+
+        // Disable full-viewport backdrop blur under software rendering before
+        // anything can open a modal (issue #1092)
+        applyModalBackdropBlurPolicy();
+
        // Initialize i18n first
        window.i18n = i18n;
        // Wait for i18n to be ready
@@ -0,0 +1,66 @@
+/**
+ * Software-rendering detection for degrading expensive visual effects.
+ *
+ * With hardware acceleration disabled (or a GPU blocklisted), Chrome rasterizes
+ * in software. A full-viewport `backdrop-filter: blur()` then forces a per-frame
+ * CPU blur over everything painted behind the modal, freezing the entire
+ * browser (issue #1092). When software rendering is detected we add the
+ * `no-modal-backdrop-blur` class to <html>, and CSS drops the backdrop blur.
+ */
+
+const SOFTWARE_RENDERER_PATTERN = /swiftshader|llvmpipe|softpipe|software|basic render/i;
+
+/**
+ * Check a WebGL renderer string against known software rasterizers.
+ * @param {string} renderer - UNMASKED_RENDERER_WEBGL string
+ * @returns {boolean}
+ */
+export function isSoftwareRendererString(renderer) {
+    return SOFTWARE_RENDERER_PATTERN.test(renderer || '');
+}
+
+/**
+ * Read the unmasked WebGL renderer string, or null when unavailable/masked.
+ * @returns {string|null}
+ */
+function getWebGLRendererString() {
+    const canvas = document.createElement('canvas');
+    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+    if (!gl) return null;
+
+    const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+    const renderer = debugInfo
+        ? String(gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) || '')
+        : '';
+
+    const loseContext = gl.getExtension('WEBGL_lose_context');
+    if (loseContext) loseContext.loseContext();
+
+    return renderer || null;
+}
+
+/**
+ * Heuristic: is the browser rasterizing in software?
+ * - No WebGL at all: no evidence of GPU acceleration, assume software.
+ * - Masked renderer string or detection failure: cannot tell, keep effects on.
+ * @returns {boolean}
+ */
+export function isSoftwareRendering() {
+    try {
+        const renderer = getWebGLRendererString();
+        if (renderer === null) {
+            return true;
+        }
+        return isSoftwareRendererString(renderer);
+    } catch (error) {
+        return true;
+    }
+}
+
+/**
+ * Toggle the blur-disabling class on <html>. Runs once at app startup.
+ * @param {boolean} [isSoftware] - Override for tests; defaults to detection.
+ */
+export function applyModalBackdropBlurPolicy(isSoftware = isSoftwareRendering()) {
+    document.documentElement.classList.toggle('no-modal-backdrop-blur', isSoftware);
+}