Spaces:
Running
Fix Safari cat transparency on first load and while idle
On Safari, the empty-state cat can show an opaque black rectangle on first load and while idle, then appear transparent during its hop. The sprite itself is RGB with a black matte; the UI was depending on mix-blend-mode: lighten and a compositing transform to hide it.
This clips the image to its pixel-art silhouette and resets the blend mode and idle transform. The full image box stays unchanged, preserving paw placement, the blink overlay, click-to-hop/meow, and the decorative/non-focusable behavior. The clip excludes the outer matte and the gap beside the tail while preserving the black eyes and mouth.
The change is a small, content-versioned stylesheet and one stylesheet link. It fits this repository's prebuilt-static-app layout, avoids stale cached CSS, and merges cleanly with the pending HTTP PR #1. No JavaScript or image bytes change.
Validation:
- 20 screenshot pixel checks passed across Chromium and Playwright WebKit 26.0 at desktop and phone viewport sizes (1x/2x pixel scale): cold load, mid-hop, after landing, reduced-motion reload, and a contrasting patterned backdrop.
- Checks compare pixels outside the silhouette to the actual background and verify that the fur, inner ear, and black eye remain visible.
- The exact PR files were tested over the current victor snapshot.
- Existing mascot checks passed: delayed-image reveal, focus/Tab behavior, click animation, reduced motion, suggestion/modal flow, saved-chat restoration, and layout at seven sizes. Production build passed.
WebKit testing ran on Linux; a physical macOS/iOS Safari device was not available. The fix removes the blend/compositing dependency instead of trying another layer-promotion workaround.