waywardinn/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix iOS status-icon blowup at the source (strip SVG intrinsic size) #7

Merged
TheDarkWizard merged 1 commit from fix/ios-status-icon-v2 into main 2026-06-30 21:51:48 +00:00
Conversation 0 Commits 1 Files changed 3 +7 -13
TheDarkWizard commented 2026-06-30 21:51:16 +00:00
Owner
Copy link

Problem

The iOS Safari status-icon blowup kept coming back. Root cause: assets/uptimekuma.svg declared width="640" height="640", giving it a 640px intrinsic size that older iOS Safari used as the flex-basis and rendered at full size. Previous fixes (background-image, then a block wrapper) tried to contain that 640px bomb and churned across several commits.

Fix

Defuse it at the source — remove the width/height attributes from the SVG (keeping viewBox for aspect ratio). Intrinsic size drops from 640px to a harmless default, so the icon can't blow up in any flex engine. With the root cause gone, the markup reverts to a plain sized <img class="status-logo"> and the fragile wrapper CSS is removed.

Verification

Reproduced and tested in Playwright WebKit (the same engine as iOS Safari) under iPhone 13 emulation:

  • index.html status dot renders at 12.6px (was blowing up to the 640px intrinsic size)
  • apps.html Uptime Kuma card icon still renders correctly at 30.6px — no regression for the other usage of this SVG
  • No horizontal overflow on either page (scrollWidth == innerWidth == 390)
## Problem The iOS Safari status-icon blowup kept coming back. Root cause: `assets/uptimekuma.svg` declared `width="640" height="640"`, giving it a 640px intrinsic size that older iOS Safari used as the flex-basis and rendered at full size. Previous fixes (background-image, then a block wrapper) tried to *contain* that 640px bomb and churned across several commits. ## Fix Defuse it at the source — remove the `width`/`height` attributes from the SVG (keeping `viewBox` for aspect ratio). Intrinsic size drops from 640px to a harmless default, so the icon can't blow up in any flex engine. With the root cause gone, the markup reverts to a plain sized `<img class="status-logo">` and the fragile wrapper CSS is removed. ## Verification Reproduced and tested in Playwright **WebKit** (the same engine as iOS Safari) under iPhone 13 emulation: - `index.html` status dot renders at **12.6px** (was blowing up to the 640px intrinsic size) - `apps.html` Uptime Kuma card icon still renders correctly at **30.6px** — no regression for the other usage of this SVG - No horizontal overflow on either page (`scrollWidth == innerWidth == 390`)
The iOS Safari status-icon blowup traced back to uptimekuma.svg declaring
width="640" height="640", giving it a 640px intrinsic size that old iOS
Safari used as the flex-basis and rendered at full size. Previous fixes
tried to contain that bomb with background-image and a block wrapper, both
of which churned and regressed.

Remove the width/height attributes from the SVG (keeping viewBox), which
drops the intrinsic size to a harmless default. With the root cause gone,
the icon renders correctly as a plain sized <img>, so this also reverts the
fragile .status-logo wrapper markup back to a simple <img>.

Verified in Playwright WebKit (iPhone 13 emulation): status dot renders at
12.6px and the apps.html Uptime Kuma card icon at 30.6px, with no horizontal
overflow on either page.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
waywardinn/homepage!7
No description provided.