xtermjs/xterm.js

[WebGL and Canvas Rendering] Font does not scale correctly with DPR higher than 1

Open

#4,728 建立於 2023年8月25日

在 GitHub 查看
 (13 留言) (0 反應) (0 負責人)TypeScript (16,196 star) (1,574 fork)batch import
area/addon/webglarea/mobilehelp wantedtype/bug

描述

When using WebGL or Canvas addons and displaying on a device with a DPR higher than 1 the text inside the container becomes larger than it should be.

DPR 4 image

DPR 1 image

When using WebGL I also get this error in Firefox when I set the DPR higher than 1.

WebGL warning: drawElementsInstanced: Drawing to a destination rect smaller than the viewport rect. (This warning will only be given once)

Details

  • Firefox and Brave Desktop with Responsive Design Mode enabled both exhibit this
  • OS version: Fedora 38
  • xterm.js version: 5.2.1
  • Canvas addon version: 0.4.0
  • WebGL addon version: 0.15.0
  • I'm using VueJS 3 to build my SPA

Steps to reproduce

  1. Create a site that uses xtermjs with either canvas or webgl
  2. Test the site with Responsive Design Mode

貢獻者指南

技術棧
typescript
領域
frontend
議題類型
bug
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
3
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
1-2 days
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
active
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
clear
前置要求
TypeScriptCanvas renderingWebGL basicsHigh DPI awareness
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
65
研究方向
Investigate font rendering in the Canvas and WebGL addons, focusing on how devicePixelRatio is handled. The issue suggests that the font size is not multiplied by inverse DPR when drawing. Check the 'drawText' or 'renderGlyph' methods in the respective renderers. Look for any scaling factors applied to the context before drawing. Ensure that the font size is adjusted according to the canvas's backing store ratio.