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

11
frontend/index.html
View file

@ -46,6 +46,17 @@
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 {
display: inline-flex;
align-items: center;

14
frontend/site.js
View file

@ -21,7 +21,8 @@ function detectBrowser() {
if (ua.includes("Safari") && !ua.includes("Chrome")) return "safari";
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?
function tabsPerRow() {
@ -109,14 +110,12 @@ function createRow(entries, rowIndex) {
row.className = "tab-row";
const speed = 90 + (rng() * 60); // 90-150s per cycle
row.style.setProperty("--speed", `${speed}s`);
// Random direction
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.animationDelay = `${-rng() * speed}s`;
row.style.setProperty("--speed", `${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)
for (let copy = 0; copy < 2; copy++) {
@ -128,6 +127,7 @@ function createRow(entries, rowIndex) {
return row;
}
// Render entries into rows
function renderEntries(entries) {
const perRow = tabsPerRow();