Skip to content

🎨 refactor: Improve animated SVG display logic #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
axeII merged 1 commit into from
May 3, 2026
Merged

🎨 refactor: Improve animated SVG display logic #18

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions layouts/partials/extend-footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
<script>
(function () {
// Swap to animated SVG on non-Firefox browsers when page uses the default background
// (i.e. walp.jpg). Articles with their own feature image keep that image.
if (navigator.userAgent.indexOf("Firefox") === -1) {
// Swap to animated SVG only on non-touch desktop screens.
// - maxTouchPoints === 0: reliable across all browsers and simulators
// - hover + pointer: secondary check for touch-capable laptops (Surface etc.)
// - innerWidth > 1024: hard screen-size cutoff
// - not Firefox: Firefox struggles with SVG animation perf
var noTouch = navigator.maxTouchPoints === 0;
var isDesktop = window.matchMedia("(hover: hover) and (pointer: fine)").matches;
var isLargeScreen = window.innerWidth > 1024;
var isFirefox = navigator.userAgent.indexOf("Firefox") !== -1;
if (noTouch && isDesktop && isLargeScreen && !isFirefox) {
var bg = document.getElementById("background-image");
if (bg && bg.src && bg.src.indexOf("walp") !== -1) {
bg.src = "/img/bg.svg";
Expand Down
Loading