Fix Safari name label blurriness by avoiding scaled text transforms

[Aotumuri]

Description:

Safari only: render name labels in screen space with scaled font sizes instead of CSS scale(), improving text sharpness
Keep non‑Safari behavior unchanged

before

after

Please complete the following:

• I have added screenshots for all UI updates
• I process any text displayed to the user through translateText() and I've added it to the en.json file
• I have added relevant tests to the test directory
• I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced

Please put your Discord username so you can be contacted if a bug or regression is found:

aotumuri

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

Walkthrough

This change adds Safari browser detection and a crisp text rendering mode to NameLayer.ts. It enables pixel-snapped text rendering in Safari by adjusting container positioning, tracking scale changes, and applying per-element transforms conditionally based on the browser.

Changes

Cohort / File(s)

Summary

Safari Crisp Text Rendering src/client/graphics/layers/NameLayer.ts

Added Safari detection helper and crispTextMode flag to gate high-precision text rendering. Introduces scale change tracking (lastScale), per-element transform logic (applyElementTransform), and conditional rendering paths. Updated renderPlayerInfo method signature with optional forceUpdate parameter. Adjusted container positioning, CSS properties, and font size calculations to support pixel-snapped rendering in Safari while maintaining normal rendering for other browsers.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

• NameLayer's texts are blurry when using Safari #758: Directly addresses Safari text blurring issue in NameLayer by implementing Safari detection and crisp text mode with modified transforms and scale tracking to prevent bitmap-scaling artifacts.

Poem

🌐 Safari's text was blurry and unclear,
So crisp precision made it bright and clear,
With pixel-snapped transforms, the text now shines,
While other browsers draw their perfect lines! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing Safari name label blurriness by avoiding scaled text transforms, which directly matches the core functionality added in the changeset.
Description check	✅ Passed	The description is directly related to the changeset, explaining the Safari-specific rendering fix using scaled font sizes instead of CSS scale(), and includes before/after screenshots demonstrating the visual improvement.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

• ✨ 136.113.208.247/32 (new)
• 34.170.211.100/32
• 35.222.179.152/32

Reviews will stop working after February 8, 2026 if the new IP is not added to your allowlist.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[VariableVince]

Is there a performance impact like in a previous PR and how does it do compared to baseline?

#1990 (review)

[Aotumuri]

Is there a performance impact like in a previous PR and how does it do compared to baseline?

#1990 (review)

@VariableVince
Is there an established benchmark or performance test that is usually used for evaluating changes like this?
I’m not very familiar with the performance testing workflow yet, so I’d really appreciate it if you could let me know how it’s normally done.

That said, I don’t believe this PR introduces a performance regression like the one discussed in #1990.
In that PR, the implementation switched to a Safari-oriented approach that affected all devices and browsers.
In contrast, this PR keeps the existing processing path for non-Safari browsers and only applies the alternative logic where it’s actually needed, so the overall performance characteristics should remain unchanged.