🐛 [CSS] font-outline utility needs Firefox fallback #15
Description
Problem
The .font-outline class uses -webkit-text-stroke which is a webkit-specific property not supported in Firefox.
Current Implementation
.font-outline {
-webkit-text-stroke: 1.5px var(--foreground);
color: transparent;
font-weight: 700;
}Browser Support
| Browser | Support | Notes |
|---|---|---|
| Chrome/Edge | ✅ Full | -webkit-text-stroke supported |
| Safari | ✅ Full | -webkit-text-stroke supported |
| Firefox | ❌ None | Shows transparent text (invisible) |
Impact
The "brnd" portion of "DevFlow.brnd" will be invisible in Firefox.
Proposed Solutions
Option 1: SVG Text (Recommended)
Use inline SVG for the logo with proper stroke attributes:
<svg>
<text
x="0"
y="0"
fill="transparent"
stroke="currentColor"
stroke-width="1.5"
>
brnd
</text>
</svg>Pros: Full browser support, consistent rendering
Cons: More complex markup
Option 2: text-shadow Fallback
Add CSS fallback for Firefox:
.font-outline {
-webkit-text-stroke: 1.5px var(--foreground);
color: transparent;
font-weight: 700;
/* Firefox fallback - 8 shadows simulate stroke */
text-shadow:
-1px -1px 0 var(--foreground),
1px -1px 0 var(--foreground),
-1px 1px 0 var(--foreground),
1px 1px 0 var(--foreground);
}Pros: Simple CSS fix
Cons: Thinner appearance in Firefox, not true outline
Option 3: Graceful Degradation
Accept that "brnd" appears solid (not outlined) in Firefox:
@supports not (-webkit-text-stroke: 1px transparent) {
.font-outline {
color: var(--foreground);
-webkit-text-stroke: none;
}
}Pros: Text remains visible
Cons: Inconsistent branding across browsers
Files to Modify
apps/ui/src/styles/global.css- Possibly
apps/ui/src/components/layout/sidebar/components/devflow-logo.tsx
Priority
Medium - Affects branding consistency but functionality is intact.
Related
- Rebrand PR: rebrand: Automaker → DevFlow.brnd with Beads validation fixes (Vibe Kanban) #13
- Rebrand tracking issue: ✅ [Complete] DevFlow.brnd Rebrand Implementation #14