[Bug] Canvas renders blurry text with fractional devicePixelRatio (e.g., 1.25) on Linux/Wayland

[traklo]

Before you submit this issue, have you checked the following

• Is this really a problem?
• I have searched the Github Issues for similar issues, but did not find anything.

Affected packages and versions

13.0 - 15.1

Reproduction link

1. Use a Linux desktop environment with fractional scaling (Tested on COSMIC DE / Wayland).
2. Set OS display scaling to 125%.
3. Verify window.devicePixelRatio in the console (Output: 1.25).
4. Open a Univer document or spreadsheet.
5. Observation: Text in the canvas area (cell content, headers) appears fuzzy.
6. Change scaling to 100% or 200%.
7. Observation: Text renders crisply.

• Screenshots

125% scale screenshots, one from within the app in development, the other from https://universheetsvite-iewl--5173--365214aa.local-corp.webcontainer.io/

If scale was 100% both screenshots would have been sharp.

Expected behavior

Text rendered inside the Canvas element should appear crisp and sharp, matching the clarity of surrounding DOM elements (e.g., toolbars, buttons), regardless of the OS display scaling factor (e.g., 100%, 125%, 150%). The internal resolution of the canvas backing store should automatically adjust to match the physical pixel density implied by window.devicePixelRatio.

Actual behavior

When devicePixelRatio is a fractional value (specifically 1.25 in this test case), the text content within the canvas appears blurry and fuzzy compared to the UI chrome. The rendering suggests that the canvas backing store is either not being sized to the correct floating-point resolution or is being upscaled via linear interpolation by the WebKit engine, resulting in a loss of sharpness. Integer scaling factors (1.0, 2.0) do not exhibit this blur.

---

The issue appears to be related to how the Univer engine handles non-integer devicePixelRatio values when initializing the Canvas backing store.

1. The width and height attributes of the <canvas> element might not be multiplied correctly by the DPR, or are being rounded incorrectly.
2. If the backing store size does not match CSS width * DPR, the browser blindly scales the bitmap, causing linear interpolation blur.

• Workarounds attempted (none successful)

1. Manual Engine Adjustment: Accessed IRenderManagerService.engine.dprChange() manually—no visible effect.
2. CSS Overrides: image-rendering: pixelated, crisp-edges, and transform: translateZ(0) had no effect.
3. Font Loading: Ensured fonts were preloaded via FontFace API.

System information

• Univer version: 0.15.1
• OS: Linux (Pop!_OS / COSMIC DE)
• Display server: Wayland
• Runtime: WebKitGTK (via Tauri 2.x desktop app)

This likely affects any high-DPI setup where the scaling factor is not an integer (Windows at 150%, macOS with non-integer scaled resolutions).