joe/everytab
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

smoother marquee and fixed icon jitter/stutter in firefox

Browse source
This commit is contained in:
Joe Lothan 2026-05-21 00:38:33 -04:00
parent 4fa40c7b47
commit b53fd7844b
3 changed files with 47 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

29
PLAN.md
View file

@ -660,6 +660,12 @@ Before public launch:
- Stats page — render pipeline stats (host count, icon coverage, crawl date) - Stats page — render pipeline stats (host count, icon coverage, crawl date)
- Test across browsers and devices - Test across browsers and devices
### Lessons learned
- **Firefox CSS transform animation jitter (Bug 739176).** Firefox deliberately snaps transformed elements to device pixels as a performance optimization. At slow marquee speeds (~21 px/sec, <1px/frame at 60fps), this creates visible icon flickering as pixels snap between integer boundaries each frame. Chrome and Safari do smooth sub-pixel GPU interpolation, so they're unaffected.
- **Fix: `filter: blur(0px)` on Firefox.** A no-op CSS filter forces Firefox through a different compositing path that enables sub-pixel rendering during transform animations. Applied via `.browser-firefox .tab-row { filter: blur(0px); }` using the existing browser detection class on `<body>`.
- **`image-rendering: pixelated` conflicts with sub-pixel transforms.** Once the filter hack enables sub-pixel rendering, `pixelated` (nearest-neighbor sampling) causes icons to flicker at sub-pixel positions. Fix: `.browser-firefox .tab-icon { image-rendering: auto; }` — bilinear filtering interpolates smoothly. Icons are very slightly softer on Firefox but don't flicker. Chrome/Safari keep `pixelated`.
- **Integer-pixel rAF animation is not a good alternative.** Attempted `requestAnimationFrame` with `Math.round()`/`Math.floor()` to control pixel snapping — eliminates flicker but introduces visible stepping at slow speeds. Text jumps are more distracting than the original jitter. The `filter` hack is strictly better.
## Phase 10: Parallelization (if needed) ## Phase 10: Parallelization (if needed)
Only pursue if single-machine time (~3-4 days) is unacceptable. Only pursue if single-machine time (~3-4 days) is unacceptable.
@ -690,6 +696,29 @@ Monthly pipeline triggered by new Common Crawl release.
--- ---
## Before Next Run
### Infrastructure
- **Run Postgres locally on EC2** instead of RDS. Eliminates the IOPS bottleneck that dominated this run + saves $12-15/run. Add Postgres install to `ec2-userdata.sh`.
- **Evaluate c5.xlarge vs c5.2xlarge** based on CPU utilization data from this run. May not need the extra cores.
- **Pre-size EBS/storage correctly** from the start — no mid-run resizes (RDS storage optimization causes I/O degradation).
### Pipeline code
- **CC-Index: streaming dedup** (INSERT ON CONFLICT) to eliminate DuckDB memory pressure and swap thrashing.
- **WARC parser: tune writer count + batch size** based on observed IOPS from this run. With local Postgres, may be able to go back to 8 writers.
- **WARC parser: remove or gate debug log lines** (`[fetcher]`, `[writer]`) behind a `--verbose` flag.
- **Icon download: measure throughput** at 5000 concurrency, decide if worth going higher.
- **Bundle gen: bilinear downscaling** instead of nearest-neighbor for >128px icons.
- **SVG rasterization** via `rsvg-convert` (recovers ~3.5% of icons).
### Measurement / validation
- **Measure final DB size** (tables + indexes) with `pg_total_relation_size` to right-size storage.
- **Check CPU utilization** across all stages to confirm actual bottlenecks.
- **Compare icon download rate** at 5000 vs 1000 concurrency.
- **Verify loss funnel numbers** add up end-to-end at 30M scale.
---
## Future Improvements (Non-Blocking) ## Future Improvements (Non-Blocking)
### Pipeline ### Pipeline

11
frontend/index.html
View file

@ -46,6 +46,17 @@
will-change: transform; will-change: transform;
} }
/* Firefox snaps transforms to device pixels (Bug 739176), causing
visible jitter. A no-op filter forces a different compositing path
that enables sub-pixel rendering during transform animations. */
.browser-firefox .tab-row {
filter: blur(0px);
}
.browser-firefox .tab-icon {
image-rendering: auto;
}
.tab { .tab {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;

14
frontend/site.js
View file

@ -21,7 +21,8 @@ function detectBrowser() {
if (ua.includes("Safari") && !ua.includes("Chrome")) return "safari"; if (ua.includes("Safari") && !ua.includes("Chrome")) return "safari";
return "chrome"; // Chrome, Edge, Opera, Brave, etc. return "chrome"; // Chrome, Edge, Opera, Brave, etc.
} }
document.body.classList.add(`browser-${detectBrowser()}`); const browserName = detectBrowser();
document.body.classList.add(`browser-${browserName}`);
// How many tabs fit in one row? // How many tabs fit in one row?
function tabsPerRow() { function tabsPerRow() {
@ -109,14 +110,12 @@ function createRow(entries, rowIndex) {
row.className = "tab-row"; row.className = "tab-row";
const speed = 90 + (rng() * 60); // 90-150s per cycle const speed = 90 + (rng() * 60); // 90-150s per cycle
row.style.setProperty("--speed", `${speed}s`);
// Random direction
const goLeft = rng() > 0.5; const goLeft = rng() > 0.5;
row.classList.add(goLeft ? "scroll-left" : "scroll-right"); const stagger = rng();
// Stagger start so rows aren't synchronized row.style.setProperty("--speed", `${speed}s`);
row.style.animationDelay = `${-rng() * speed}s`; row.classList.add(goLeft ? "scroll-left" : "scroll-right");
row.style.animationDelay = `${-stagger * speed}s`;
// Add tabs twice so the marquee loops seamlessly (translate -50% = one full set) // Add tabs twice so the marquee loops seamlessly (translate -50% = one full set)
for (let copy = 0; copy < 2; copy++) { for (let copy = 0; copy < 2; copy++) {
@ -128,6 +127,7 @@ function createRow(entries, rowIndex) {
return row; return row;
} }
// Render entries into rows // Render entries into rows
function renderEntries(entries) { function renderEntries(entries) {
const perRow = tabsPerRow(); const perRow = tabsPerRow();