From fda8dca435e06fe158d090ffe01d6415c06b12b7 Mon Sep 17 00:00:00 2001 From: Nate Emmert Date: Thu, 15 Oct 2026 15:29:14 -0400 Subject: [PATCH] Performance: stop iPhone freezes (blur over live map, runaway animation, eager charts) Main app - No backdrop-filter over the live map, animated sky, or sticky headings (it re-blurs every frame; on iPhone that is a classic stutter/lock-up); top/bottom bars keep a light 8px blur - Sky effect only draws while the hero is on screen and the Now tab is active, ~30fps cap, fewer particles on phones; fixed a stale animation-frame id that could stop restarts Dashboard - Charts are built only when the Charts tab is opened (was ~11 charts on every page load), and the 2-minute refresh no longer rebuilds them in the background - On phones: max 360 points per chart (was 720), no entry animation, device pixel ratio capped at 2 - Lighter header blur, none on small buttons/cards Co-Authored-By: Claude Sonnet 5.5 --- app/public/app-ui.css | 12 ++++++++++++ app/public/app-ui.js | 23 ++++++++++++++++------- app/public/dashboard-ui.css | 4 ++++ app/public/dashboard-ui.js | 1 + app/public/dashboard.html | 26 ++++++++++++++++++++------ 5 files changed, 53 insertions(+), 13 deletions(-) diff --git a/app/public/app-ui.css b/app/public/app-ui.css index a87ee01..48f70b8 100644 --- a/app/public/app-ui.css +++ b/app/public/app-ui.css @@ -330,3 +330,15 @@ body.map-fs #tab-unified-map { padding: 0; } .geo-status.hidden { display: none; } .geo-status.ok { color: #22c55e; } .geo-status.warn { color: var(--ink); background: color-mix(in srgb, #ef4444 14%, var(--paper-darker)); border: 1px solid color-mix(in srgb, #ef4444 45%, transparent); } + +/* ── Performance on phones ── + backdrop-filter re-blurs everything behind it on every frame. Over a live WebGL map, an animated sky + or sticky headings that is what makes iPhones stutter and lock up, so those use solid translucent fills. */ +.hero-hilo, .sticky-head, .glass, .hud-btn, #tab-unified-map .map-readout-chip, +.map-layer-menu-panel, .map-timeline-wrap, .map-data-panel, .install-banner { + -webkit-backdrop-filter: none !important; backdrop-filter: none !important; +} +.glass, .hud-btn, #tab-unified-map .map-readout-chip { background: color-mix(in srgb, var(--paper-dark) 92%, transparent) !important; } +.sticky-head { background: color-mix(in srgb, var(--paper) 96%, transparent) !important; } +.hero-hilo { background: rgba(0, 0, 0, 0.24) !important; } +.topbar, .bottom-nav { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } diff --git a/app/public/app-ui.js b/app/public/app-ui.js index 5d96637..79210fc 100644 --- a/app/public/app-ui.js +++ b/app/public/app-ui.js @@ -53,7 +53,10 @@ function skyFor(code, isDay, stationRaining) { return isDay ? 'clear-day' : 'clear-night'; } -const fx = { raf: 0, kind: null, parts: [], w: 0, h: 0, flash: 0 }; +const fx = { raf: 0, kind: null, parts: [], w: 0, h: 0, flash: 0, last: 0, onScreen: true }; +const PHONE = window.matchMedia('(max-width: 640px)').matches; +const fxShouldRun = () => fx.parts.length && !REDUCED && !document.hidden && fx.onScreen && document.body.dataset.tab === 'conditions'; +function fxKick() { if (!fx.raf && fxShouldRun()) fx.raf = requestAnimationFrame(fxFrame); } function fxResize(canvas) { const dpr = Math.min(window.devicePixelRatio || 1, 2); fx.w = canvas.clientWidth; fx.h = canvas.clientHeight; @@ -61,7 +64,8 @@ function fxResize(canvas) { canvas.getContext('2d').setTransform(dpr, 0, 0, dpr, 0, 0); } function fxSeed(kind) { - const n = kind === 'storm' ? 130 : kind === 'rain' ? 85 : kind === 'snow' ? 70 : kind === 'clear-night' ? 55 : 0; + const base = kind === 'storm' ? 130 : kind === 'rain' ? 85 : kind === 'snow' ? 70 : kind === 'clear-night' ? 55 : 0; + const n = Math.round(base * (PHONE ? 0.55 : 1)); fx.parts = Array.from({ length: n }, () => ({ x: Math.random() * fx.w, y: Math.random() * fx.h, v: kind === 'snow' ? 0.4 + Math.random() * 0.9 : kind === 'clear-night' ? 0 : 6 + Math.random() * 7, @@ -70,8 +74,11 @@ function fxSeed(kind) { })); } function fxFrame(t) { + fx.raf = 0; const canvas = $('sky-fx'); - if (!canvas) return; + if (!canvas || !fxShouldRun()) return; // hidden tab / scrolled away / app in background: stop drawing entirely + if (t - fx.last < 33) { fx.raf = requestAnimationFrame(fxFrame); return; } // cap at ~30 fps + fx.last = t; const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, fx.w, fx.h); const kind = fx.kind; @@ -100,21 +107,23 @@ function fxFrame(t) { ctx.beginPath(); ctx.arc(p.x, p.y * 0.8, p.r, 0, Math.PI * 2); ctx.fill(); } } - if (!REDUCED && !document.hidden) fx.raf = requestAnimationFrame(fxFrame); + fx.raf = requestAnimationFrame(fxFrame); } function setSky(kind) { const hero = $('hero'), canvas = $('sky-fx'); if (!hero || !canvas) return; hero.dataset.sky = kind; cancelAnimationFrame(fx.raf); + fx.raf = 0; fx.kind = kind; fxResize(canvas); fxSeed(kind); - if (fx.parts.length) fxFrame(performance.now()); + if (fx.parts.length) fxKick(); else canvas.getContext('2d').clearRect(0, 0, fx.w, fx.h); } window.addEventListener('resize', () => { const c = $('sky-fx'); if (c && fx.kind) { fxResize(c); fxSeed(fx.kind); } }); -document.addEventListener('visibilitychange', () => { if (!document.hidden && fx.parts.length && !REDUCED) { cancelAnimationFrame(fx.raf); fxFrame(performance.now()); } }); +document.addEventListener('visibilitychange', fxKick); +if ('IntersectionObserver' in window && $('hero')) new IntersectionObserver((es) => { fx.onScreen = es[0].isIntersecting; fxKick(); }).observe($('hero')); // ── Nowcast: next 2 hours from 15-minute precipitation ─────────────────────── function nowcastSlots(data) { @@ -459,7 +468,7 @@ window.AppUI = { centerMap, refreshGeoStatus: () => GeoStatus.refresh(), onAir(air) { renderAqi(air); }, - refreshFx() { const c = $('sky-fx'); if (c && fx.kind) { cancelAnimationFrame(fx.raf); fxResize(c); fxSeed(fx.kind); if (fx.parts.length) fxFrame(performance.now()); } }, + refreshFx() { const c = $('sky-fx'); if (c && fx.kind) { cancelAnimationFrame(fx.raf); fx.raf = 0; fxResize(c); fxSeed(fx.kind); fxKick(); } }, onStation() { syncTopbarLocation(); renderStationContext(); }, }; diff --git a/app/public/dashboard-ui.css b/app/public/dashboard-ui.css index 5a85b4a..b6023f9 100644 --- a/app/public/dashboard-ui.css +++ b/app/public/dashboard-ui.css @@ -151,3 +151,7 @@ a { color: var(--ui); } .nws-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #a78bfa; margin-left: 0.35rem; vertical-align: middle; } .nws-card .kv b { font-size: 1.05rem; } .nws-raw { display: block; margin-top: 0.4rem; font-size: 0.7rem; overflow-wrap: anywhere; color: var(--ink-light); background: var(--paper); border: 1px solid var(--border); border-radius: 8px; padding: 0.35rem 0.55rem; } + +/* Performance on phones: blur only the two big fixed bars, lightly */ +.logout, .range-btn, .refresh-btn, .chart-card, .stat, .today-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } +.header, .tabbar { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } diff --git a/app/public/dashboard-ui.js b/app/public/dashboard-ui.js index ffcfd28..a774558 100644 --- a/app/public/dashboard-ui.js +++ b/app/public/dashboard-ui.js @@ -51,6 +51,7 @@ function setTab(name, updateHash = true) { } function activeTab() { return document.querySelector('.tab.active')?.dataset.tab || 'now'; } function renderTab(name) { + if (name === 'charts' && typeof chartsDirty !== 'undefined' && chartsDirty && typeof loadHistory === 'function') loadHistory(currentRange); if (name === 'rain' && !rendered.rain) { renderRain(); rendered.rain = true; } if (name === 'records' && !rendered.cal) { renderCalendar(); rendered.cal = true; } if (name === 'insights' && !rendered.insights) { renderInsights(); rendered.insights = true; } diff --git a/app/public/dashboard.html b/app/public/dashboard.html index af35561..558626b 100644 --- a/app/public/dashboard.html +++ b/app/public/dashboard.html @@ -614,6 +614,18 @@ const RANGE_LABELS = { }; let currentRange = '24h'; + +// ── Phone-friendly charts ── +// Fewer points, no entry animation and a capped pixel ratio keep 11 charts cheap on an iPhone, and charts +// are only built while the Charts tab is actually on screen. +const NARROW_SCREEN = window.innerWidth < 700; +const MAX_PTS = NARROW_SCREEN ? 360 : 720; +let chartsDirty = true; +const chartsPaneActive = () => !!document.querySelector('.tab-pane[data-pane="charts"].active'); +if (typeof Chart !== 'undefined') { + if (window.matchMedia('(pointer: coarse)').matches) Chart.defaults.animation = false; + Chart.defaults.devicePixelRatio = Math.min(window.devicePixelRatio || 1, 2); +} let charts = {}; // ── Formatting helpers ────────────────────────────────────────────────────── @@ -807,7 +819,7 @@ async function drawPresTend(pagePts, pageRange) { if (hit && Date.now() - hit.at < 120000) pts = hit.data; else { try { - const bucket = ['7d', '30d', 'all'].includes(range) ? '&points=720' : ''; + const bucket = ['7d', '30d', 'all'].includes(range) ? '&points=' + MAX_PTS : ''; const r = await fetch(`/api/station/history?range=${range}${bucket}`); pts = r.ok ? await r.json() : []; } catch { pts = []; } @@ -815,7 +827,7 @@ async function drawPresTend(pagePts, pageRange) { } if (document.getElementById('cPresTend') !== canvas) return; // charts were re-rendered meanwhile } - if (pts.length > 900) { const step = Math.ceil(pts.length / 720); pts = pts.filter((_, i) => i % step === 0); } + if (pts.length > MAX_PTS * 1.25) { const step = Math.ceil(pts.length / MAX_PTS); pts = pts.filter((_, i) => i % step === 0); } // Bucketed (long) ranges can't resolve changes shorter than one bucket: widen the window to fit const bucketMs = pts.length > 1 ? (pts[pts.length - 1].dateutc - pts[0].dateutc) / (pts.length - 1) : 0; const effHours = Math.max(presTendWin, Math.ceil(bucketMs / 3600000)); @@ -892,8 +904,8 @@ function renderCharts(readings, range, yoy = null, nws = null) { // downsample for 30d to keep chart manageable let pts = readings; - if (readings.length > 720) { - const step = Math.ceil(readings.length / 720); + if (readings.length > MAX_PTS) { + const step = Math.ceil(readings.length / MAX_PTS); pts = readings.filter((_, i) => i % step === 0); } const lbls = pts.map(r => fmtTime(r.dateutc, range)); @@ -990,7 +1002,7 @@ function renderCharts(readings, range, yoy = null, nws = null) { const addNws = (sets, key, suffix, dashed) => { const a = nwsAlign(pts, nws, key); if (a) sets.push(nwsDataset(`${nwsLab} ${suffix}`, a, dashed)); }; addNws(tempDatasets, 'tempf', 'temp'); if (yoy?.prior?.length) { - const yoyPts = yoy.prior.length > 720 ? yoy.prior.filter((_, i) => i % Math.ceil(yoy.prior.length / 720) === 0) : yoy.prior; + const yoyPts = yoy.prior.length > MAX_PTS ? yoy.prior.filter((_, i) => i % Math.ceil(yoy.prior.length / MAX_PTS) === 0) : yoy.prior; tempDatasets.push({ ...lineDataset('Last Year', yoyPts.map(r => r.tempf), c.accent + '55', true), borderWidth: 1 }); } makeChart('cTemp', 'line', tempDatasets, lbls, '°F', { plugins: { legend: { labels: { filter: i => !['Max', 'Min'].includes(i.text) } } } }); @@ -1164,10 +1176,12 @@ async function updateLatest() { // ── Load history ───────────────────────────────────────────────────────────── async function loadHistory(range) { + if (!chartsPaneActive()) { chartsDirty = true; return; } // build charts when the Charts tab is opened + chartsDirty = false; const area = document.getElementById('chartsArea'); area.innerHTML = '
Loading…
'; try { - const pts = ['7d','30d','90d','1y','2y','3y','all'].includes(range) ? '&points=720' : ''; + const pts = ['7d','30d','90d','1y','2y','3y','all'].includes(range) ? '&points=' + MAX_PTS : ''; const nwsP = nwsOverlay ? fetch(`/api/nws/history?range=${range}`).then(x => (x.ok ? x.json() : [])).catch(() => []) : Promise.resolve([]); const r = await fetch(`/api/station/history?range=${range}${pts}`); if (r.status === 401) { location.href = '/dashboard/login'; return; }