fix(pet): stop i18n from corrupting CSS keyframes in PetOverlay#6360
Open
AloneFire wants to merge 1 commit into
Open
fix(pet): stop i18n from corrupting CSS keyframes in PetOverlay#6360AloneFire wants to merge 1 commit into
AloneFire wants to merge 1 commit into
Conversation
PetOverlay passed CSS @Keyframes strings through translate(), which routes them through i18n. Translators (zh/ja/es) translated CSS keywords (transform -> 变换, background-position -> 背景位置, to -> 到), producing invalid CSS that browsers silently discard. The pet sprite animation froze on the first frame, and pet-bob float stopped. Bundled pets (animated WebP via <img>) were unaffected — they bypass the CSS keyframes path entirely. Custom spritesheet pets (SpriteFrame, CSS background-position stepping) were fully broken in any non-English locale whose translation touched those two keys. Fix: - Replace translate() wrapping CSS with template literals / string literals in PetOverlay.tsx so CSS never enters the i18n pipeline. - Remove the now-orphaned localization keys (de932b0e8f, 4712d196c6) from all locale files (en/zh/ja/es/ko) since they are no longer referenced by any source code. Root cause verified via CDP: injecting valid @Keyframes made background-position cycle through 6 frames (0 -> -507.7px -> 0) and pet-bob transform animate immediately.
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
💤 Files with no reviewable changes (5)
📝 WalkthroughWalkthroughPetOverlay now defines the sprite-row and bobbing 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
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
2 participants
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.
PetOverlay passed CSS @Keyframes strings through
translate(), routing CSSthrough the i18n pipeline. Translators (zh/ja/es) translated CSS keywords
(
transform→变换,background-position→背景位置,to→到),producing invalid CSS that browsers silently discard. The pet sprite animation
froze on the first frame, and
pet-bobfloat stopped.Bundled pets (animated WebP via
<img>) were unaffected — they bypass the CSSkeyframes path entirely. Custom spritesheet pets (
SpriteFrame, CSSbackground-positionstepping) were fully broken in any non-English locale whosetranslation touched those two keys.
Fix:
translate()wrapping CSS with a template-literal variable(
keyframesCss) and a module-level constant (PET_BOB_KEYFRAMES_CSS) inPetOverlay.tsx, so CSS never enters the i18n pipeline.de932b0e8f,4712d196c6) fromall locale files (en/zh/ja/es/ko) since they are no longer referenced by any
source code.
Root cause verified via CDP: injecting valid
@keyframesmadebackground-positioncycle through 6 frames (0 → -507.7px → 0) andpet-bobtransform animate immediately.
Summary
Custom spritesheet pets freeze on the first frame in non-English locales
(zh/ja/es), and the
pet-bobfloating animation also stops. This PR fixes thesprite frame animation and the bob float for custom pets in all locales.
Screenshots
No visual change to the UI chrome. The fix restores an existing animation that
was broken — the pet sprite now steps through its frames and bobs up and down as
intended.
Testing
pnpm lintpnpm typecheckpnpm testpnpm buildexplained why tests were not needed
pnpm lint— oxlint, switch-exhaustiveness, localization catalog (9115 refsverified), and coverage audit (0 unlocalized candidates) all pass.
pnpm typecheck— tsgo across all three tsconfigs (node/cli/web) passes.pnpm test— 20791 passed, 5 failed. All 5 failures are pre-existingenvironment issues unrelated to this PR: zh-system-locale cron label mismatch
(
星期日svsSundays), missinghermesCLI, and three filesystem/git timeoutflakes. None of the failing test files touch
PetOverlay,pet/, or i18n localefiles. Pet and i18n test suites (7 files, 20 tests) pass cleanly.
pnpm build— full desktop build (typecheck → relay 6-platform → cli →electron-vite 961 modules → web 8165 modules) succeeds.
No new tests added. The existing
PetOverlay.test.tsonly coversclampPositionToViewport(pure positioning math) and does not assert on CSSkeyframes or animation playback — CSS
@keyframesvalidity is enforced by thebrowser, not by jsdom. The regression is structural (CSS string passing through
i18n) and is prevented at the source level by removing the
translate()calls.The
no-top-level-translate.test.tsstatic-analysis guard remains satisfied.AI Review Report
Reviewed the change for correctness, fallback behavior, and cross-locale
impact.
Main risks checked:
verify-localization-catalog.mjsonly checks the"source reference → en.json" direction and does not flag orphaned keys, so
removing unreferenced keys is safe. Catalog parity across locales is preserved
(all 5 locales had the same two keys removed; parity verified at 9653 keys each).
expressions to variable assignments / module constants avoids the
jsx-expressioncandidate classification — coverage passes with 0 allowlistedcandidates, no exemption debt.
no-top-level-translate.test.ts: checks thattranslate()is not calledat module load time. This PR removes
translate()calls fromPetOverlay.tsxentirely, so the guard is trivially satisfied.
selectPetAnimationNameand theSpriteFramerow/frames logic are unchanged — only the CSS string generationmechanism changed (i18n → template literal variable / module constant). All
animation states (idle/running/waiting/review/jumping) remain driven as before.
<img>, nevertouching the CSS keyframes path.
Cross-platform compatibility (macOS/Linux/Windows): this is a renderer-only CSS
string change with no platform-specific APIs, shortcuts, paths, shell behavior,
or Electron platform differences. Identical behavior on all platforms.
Security Audit
No security-relevant surface touched. No new IPC channels, no file/path
handling, no command execution, no auth/secrets, no new dependencies. The change
replaces an i18n function call with a string variable/constant and removes unused
JSON values. No follow-up needed.
Notes
No platform-specific behavior or risks. The fix applies uniformly across all
locales and platforms. The bundled animated-WebP pets were never affected and
continue to work as before.