xtermjs/xterm.js

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

Open

#4,728 opened on 2023年8月25日

GitHub で見る
 (13 comments) (0 reactions) (0 assignees)TypeScript (16,196 stars) (1,574 forks)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
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
3
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-2 days
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
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.