Web UI Blurring Issues under System Fractional Scaling (+5% Steps)

[kingvavasav]

Feedback Report:

Issue Summary

• Problem 1: Severe text and font rendering blur inside the Facebook Notification Tab when using custom fractional system scaling.
• Problem 2: Poor adaptation to intermediate scale factors (e.g., 105%, 110%) set via desktop environment "Additional scale options" (+/- 5% steps).
• Current Behavior: While the standard 100% scale is too sharp/small and 125% is completely oversized, utilizing the system's precise 5% scaling increments causes the Facebook web interface layout and text elements to lose pixel-alignment, resulting in blurry typography.

Detailed Description

1. Interpolation Blur in Notification Panel

• Symptom: When the operating system scales the display using incremental 5% options (such as setting the layout to 105% or 110% via System Display Settings), the font assets inside the Facebook "Notifikasi" sidebar do not align with the pixel grid. This creates an anti-aliasing artifact that renders text fuzzy and hard to read.
• Impact: High eye strain and degraded user experience. The issue is specific to the web app's failure to handle non-standard fractional scale factors dynamically.

2. Layout Magnification Gap

• Symptom: Standard jumps (100% to 125%) break the web layout by over-zooming elements. Users are forced to use fine-grained system scaling (105%-110%) to maintain a balanced layout, which Facebook currently fails to render sharply.

Proposed Solutions & Requests

• Optimize CSS/Canvas Rendering for Fractional Scales: Update the web application's CSS engine (specifically font-rendering and subpixel antialiasing properties) to correctly support custom environmental scale factors like 1.05x or 1.10x.
• Vector Asset Alignment: Ensure notification icons, text baselines, and container boundaries snap perfectly to decimal scaling inputs to prevent linear interpolation blur.
• Add Native In-App Custom Scale Slider: Provide an internal web-app scaling feature that allows users to override system scaling boundaries cleanly.

Environment Context

• Display Settings: 1920x1080 Resolution, 60 Hz
• System Scaling Profile: Custom Display Scale with "Additional scale options" configured at fine 5% increments (Targeting 105% / 110%).
• Platform: Desktop Web Browser (Chromium-based)