Feat/liquidglass safari - #6
Merged
Merged
Conversation
…ffects - Remove "use client" from AnimatedMarquee and PageTransition — pure rendering, no browser APIs needed - Replace useLayoutEffect with useEffect in ExperienceList and ProjectList — avoids forcing synchronous layout before browser paint
…ed for seamless CSS loop
- Remove animation-timeline: scroll(root) from .scroll-progress — this CSS scroll-driven animation on a position:fixed element blocked Safari 18's initial composite/paint step on iPhone, causing an 11-second blank screen. Replace with a passive scroll listener in Navbar that applies transform: scaleX() directly. - Change CV dialog max-h-[92vh] → max-h-[92dvh] so the dialog respects the dynamic viewport height (shrinks correctly when Safari tab bar / address bar are visible, preventing close button and footer from being clipped).
…stem' when following OS preference, resolvedTheme is the actual value
…ri after tap, active clears immediately on release
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Performance & mobile Safari fixes
What changed
11-second blank screen on iPhone Safari (root cause found and fixed)
CSS animation-timeline: scroll(root) on a position: fixed element (the scroll-progress bar) caused Safari 18 on iPhone to block its initial composite/paint step until the document scroll range was fully computed. With Safari's collapsible toolbar, this took ~11 seconds. iPad and iOS Chrome were unaffected (former on Safari 17 which ignores the property, latter using an older WebKit config). Replaced with a passive JS scroll listener that sets transform: scaleX() directly on the element.
Bundle and hydration size reduction
Removed "use client" from AnimatedMarquee and PageTransition — neither used hooks or browser APIs, making them needlessly client components
Replaced useLayoutEffect with useEffect in ExperienceList and ProjectList — the title-height equalizer doesn't need synchronous DOM measurement before paint
Halved marquee item duplication (4× → 2×) — the CSS animation uses translateX(-50%) so 2× is sufficient for a seamless loop; saves ~7KB of RSC payload
Theme toggle correctness
Fixed icon showing wrong state when OS is in dark mode: theme returns "system" when following the OS preference, not "dark". Switched to resolvedTheme which always returns the actual applied value
Fixed sticky hover/focus on iOS Safari after tap: replaced hover: with active: so the highlight only shows while the finger is down
CV dialog
Fixed close button and download PDF being clipped when Safari's tab bar is visible: max-h-[92vh] → max-h-[92dvh] so the dialog tracks the actual visible height dynamically
Added 150ms fade-out on close so the dismiss feels instant — the GPU takes time to release backdrop-blur layers, previously leaving the dialog visually frozen after the tap
Polish
Rounded corners (rounded-3xl) on hero and More About Me photos