Spaces:
Running
Fix Safari cat transparency on first load and while idle
Browse filesOn 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.
- assets/mascot-clip-81213051.css +11 -0
- index.html +1 -0
|
@@ -0,0 +1,11 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
/* The RGB mascot sprite has an opaque black matte. Clip its silhouette
|
| 2 |
+
explicitly so initial/idle Safari paints do not depend on blend layers.
|
| 3 |
+
Coordinates match empty-cat-v1.png (1254 x 1254); preserve the image box
|
| 4 |
+
for the existing paw placement and blink overlay. */
|
| 5 |
+
.mascot-cat {
|
| 6 |
+
mix-blend-mode: normal;
|
| 7 |
+
transform: none;
|
| 8 |
+
}
|
| 9 |
+
.empty-mascot img {
|
| 10 |
+
clip-path: polygon(16.906% 6.220%, 26.077% 6.220%, 26.077% 9.729%, 30.861% 9.729%, 30.861% 14.274%, 35.407% 14.274%, 35.407% 20.175%, 56.539% 20.175%, 56.539% 14.274%, 61.404% 14.274%, 61.404% 9.729%, 65.710% 9.729%, 65.710% 6.220%, 75.040% 6.220%, 75.040% 44.498%, 68.820% 44.498%, 68.820% 48.166%, 75.040% 48.166%, 75.040% 52.073%, 68.820% 52.073%, 68.820% 57.576%, 65.152% 57.576%, 65.152% 61.324%, 68.979% 61.324%, 68.979% 67.225%, 73.285% 67.225%, 73.285% 77.033%, 77.671% 77.033%, 77.671% 55.742%, 81.818% 55.742%, 81.818% 51.595%, 91.228% 51.595%, 91.228% 63.397%, 86.124% 63.397%, 86.124% 85.566%, 81.579% 85.566%, 81.579% 92.265%, 25.040% 92.265%, 25.040% 85.566%, 28.070% 85.566%, 28.070% 57.576%, 19.856% 57.576%, 19.856% 52.073%, 12.520% 52.073%, 12.520% 48.166%, 19.856% 48.166%, 19.856% 44.498%, 12.520% 44.498%, 12.520% 41.467%, 16.906% 41.467%);
|
| 11 |
+
}
|
|
@@ -23,6 +23,7 @@
|
|
| 23 |
<title>Pi 路 Coding agent in your browser</title>
|
| 24 |
<script type="module" crossorigin src="./assets/index-DnXFGQ8z.js"></script>
|
| 25 |
<link rel="stylesheet" crossorigin href="./assets/index-CLisF1Ml.css">
|
|
|
|
| 26 |
</head>
|
| 27 |
<body>
|
| 28 |
<header><a class="brand" href="./" aria-label="Pi"><svg class="pi-logo" viewBox="165.29 165.29 469.43 469.43" width="18" height="18" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z"/><path fill="currentColor" d="M517.36 400H634.72V634.72H517.36Z"/></svg></a>
|
|
|
|
| 23 |
<title>Pi 路 Coding agent in your browser</title>
|
| 24 |
<script type="module" crossorigin src="./assets/index-DnXFGQ8z.js"></script>
|
| 25 |
<link rel="stylesheet" crossorigin href="./assets/index-CLisF1Ml.css">
|
| 26 |
+
<link rel="stylesheet" href="./assets/mascot-clip-81213051.css">
|
| 27 |
</head>
|
| 28 |
<body>
|
| 29 |
<header><a class="brand" href="./" aria-label="Pi"><svg class="pi-logo" viewBox="165.29 165.29 469.43 469.43" width="18" height="18" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z"/><path fill="currentColor" d="M517.36 400H634.72V634.72H517.36Z"/></svg></a>
|