yiekheng/sunnymh-manga-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Inline drawer-header colors to fix iOS invisible text

Browse Source 
iOS WebKit intermittently fails to resolve Tailwind's CSS-variable-based
color utilities (text-foreground, text-muted, bg-background) in this
specific stacking context (fixed + nested absolute + rounded-t-3xl +
overflow-hidden). Text was rendering with an unresolved color, making it
invisible but still selectable/copyable.

Inline hex values bypass the variable chain and force the resolved color.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
yiekheng 2026-04-15 22:21:13 +08:00
parent f6fa5d9d6a
commit 6ea021d284
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/PageReader.tsx
View File

@ -675,15 +675,24 @@ export function PageReader({
className="absolute bottom-0 left-0 right-0 max-h-[75vh] bg-background rounded-t-3xl shadow-2xl overflow-hidden" className="absolute bottom-0 left-0 right-0 max-h-[75vh] bg-background rounded-t-3xl shadow-2xl overflow-hidden"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<div className="bg-background border-b border-border"> <div
className="border-b border-border"
style={{ backgroundColor: "#ffffff" }}
>
<div className="flex justify-center pt-2.5 pb-1.5"> <div className="flex justify-center pt-2.5 pb-1.5">
<div className="w-10 h-1 rounded-full bg-muted/40" /> <div className="w-10 h-1 rounded-full bg-muted/40" />
</div> </div>
<div className="px-5 py-3 flex items-center justify-between"> <div className="px-5 py-3 flex items-center justify-between">
<span className="text-foreground text-base font-bold"> <span
className="text-base font-bold"
style={{ color: "#202124" }}
>
Chapters Chapters
</span> </span>
<span className="text-xs text-muted tabular-nums"> <span
className="text-xs tabular-nums"
style={{ color: "#888888" }}
>
{chapters.length} total {chapters.length} total
</span> </span>
</div> </div>