From 6a8a8a6bda55cba0e5984f65da4a63d605b1eb2d Mon Sep 17 00:00:00 2001 From: Kibi Kelburton Date: Wed, 15 Jul 2026 16:49:00 +0200 Subject: [PATCH] fuck chrome --- public/s/css/f0ckm.css | 6 ++-- public/s/js/f0ckm.js | 66 ++++++++++++++++++++++++++++++++++-------- 2 files changed, 58 insertions(+), 14 deletions(-) diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index 5e304ae..9d14f49 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -7012,8 +7012,10 @@ div.favs div.posts { right: 0; width: 100%; height: 100%; - -webkit-filter: blur(100px); - filter: blur(100px); + /* blur is applied in canvas 2D context at draw time — no CSS filter needed. + CSS filter: blur() on a full-screen fixed element forces Chromium to run + a GPU blur pass on every compositor frame (incl. during the fade transition), + which is extremely expensive. Firefox uses a cheaper path for this. */ transform: translate3d(0, 0, 0); z-index: 0; transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1); diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js index 2f82a83..c675821 100644 --- a/public/s/js/f0ckm.js +++ b/public/s/js/f0ckm.js @@ -1496,8 +1496,14 @@ window.cancelAnimFrame = (function () { // Only reset canvas dimensions when turning ON (avoids clearing pixels mid-fade-out). const context = canvas.getContext('2d'); - const cw = canvas.width = canvas.clientWidth | 0; - const ch = canvas.height = canvas.clientHeight | 0; + // Draw at 1/4 resolution — the canvas is stretched to full-screen by CSS, + // so a smaller internal resolution is imperceptible for a blurred background. + // This reduces blur computation from O(W*H) to O(W/4 * H/4) = 1/16th the pixels. + const SCALE = 0.25; + const cw = canvas.width = Math.max(1, (canvas.clientWidth * SCALE) | 0); + const ch = canvas.height = Math.max(1, (canvas.clientHeight * SCALE) | 0); + // Blur radius scaled proportionally to the downsampled canvas size + const blurPx = Math.round(100 * SCALE) || 1; const drawOnce = () => { if (!background || !context) return; @@ -1518,15 +1524,27 @@ window.cancelAnimFrame = (function () { // Step 1: draw thumbnail immediately for instant background const thumb = new Image(); thumb.onload = () => { - try { context.drawImage(thumb, 0, 0, cw, ch); } catch (e) {} + try { + context.filter = `blur(${blurPx}px)`; + context.drawImage(thumb, 0, 0, cw, ch); + context.filter = 'none'; + } catch (e) {} showCanvas(); // Step 2: upgrade with full image when it's ready (skip for AUDIO elements) if (isDrawable) { if (elem.complete) { - try { context.drawImage(elem, 0, 0, cw, ch); } catch (e) {} + try { + context.filter = `blur(${blurPx}px)`; + context.drawImage(elem, 0, 0, cw, ch); + context.filter = 'none'; + } catch (e) {} } else { elem.onload = () => { - try { context.drawImage(elem, 0, 0, cw, ch); } catch (e) {} + try { + context.filter = `blur(${blurPx}px)`; + context.drawImage(elem, 0, 0, cw, ch); + context.filter = 'none'; + } catch (e) {} }; } } @@ -1535,11 +1553,19 @@ window.cancelAnimFrame = (function () { // Thumbnail failed — fall back to waiting for the main image (skip for AUDIO) if (isDrawable) { if (elem.complete) { - try { context.drawImage(elem, 0, 0, cw, ch); } catch (e) {} + try { + context.filter = `blur(${blurPx}px)`; + context.drawImage(elem, 0, 0, cw, ch); + context.filter = 'none'; + } catch (e) {} showCanvas(); } else { elem.onload = () => { - try { context.drawImage(elem, 0, 0, cw, ch); } catch (e) {} + try { + context.filter = `blur(${blurPx}px)`; + context.drawImage(elem, 0, 0, cw, ch); + context.filter = 'none'; + } catch (e) {} showCanvas(); }; } @@ -1552,11 +1578,19 @@ window.cancelAnimFrame = (function () { } else if (isDrawable) { // No item ID — fall back to waiting for the main image if (elem.complete) { - try { context.drawImage(elem, 0, 0, cw, ch); } catch (e) {} + try { + context.filter = `blur(${blurPx}px)`; + context.drawImage(elem, 0, 0, cw, ch); + context.filter = 'none'; + } catch (e) {} showCanvas(); } else { elem.onload = () => { - try { context.drawImage(elem, 0, 0, cw, ch); } catch (e) {} + try { + context.filter = `blur(${blurPx}px)`; + context.drawImage(elem, 0, 0, cw, ch); + context.filter = 'none'; + } catch (e) {} showCanvas(); }; } @@ -1569,7 +1603,9 @@ window.cancelAnimFrame = (function () { return; } try { + context.filter = `blur(${blurPx}px)`; context.drawImage(elem, 0, 0, cw, ch); + context.filter = 'none'; } catch (e) { bgRafId = null; return; @@ -1618,11 +1654,17 @@ window.cancelAnimFrame = (function () { const itemId = window.getCurrentItemId(); if (itemId) { const context = canvas.getContext('2d'); - const cw = canvas.width = canvas.clientWidth | 0; - const ch = canvas.height = canvas.clientHeight | 0; + const _SCALE = 0.25; + const cw = canvas.width = Math.max(1, (canvas.clientWidth * _SCALE) | 0); + const ch = canvas.height = Math.max(1, (canvas.clientHeight * _SCALE) | 0); + const blurPx = Math.round(100 * _SCALE) || 1; const thumb = new Image(); thumb.onload = () => { - try { context.drawImage(thumb, 0, 0, cw, ch); } catch (e) {} + try { + context.filter = `blur(${blurPx}px)`; + context.drawImage(thumb, 0, 0, cw, ch); + context.filter = 'none'; + } catch (e) {} canvas.classList.remove('fader-out', 'fast-fade'); canvas.classList.add('fader-in'); };