xtermjs/xterm.js

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

Open

#4 728 ouverte le 25 août 2023

Voir sur GitHub
 (13 commentaires) (0 réactions) (0 assignés)TypeScript (1 574 forks)batch import
area/addon/webglarea/mobilehelp wantedtype/bug

Métriques du dépôt

Stars
 (16 196 stars)
Métriques de merge PR
 (Merge moyen 4j 3h) (81 PRs mergées en 30 j)

Description

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

Guide contributeur

Direction de recherche
Étudiez le rendu des polices dans les addons Canvas et WebGL, en vous concentrant sur la gestion de devicePixelRatio. Le problème suggère que la taille de la police n'est pas multipliée par l'inverse du DPR lors du dessin. Vérifiez les méthodes 'drawText' ou 'renderGlyph' dans les moteurs de rendu respectifs. Recherchez tout facteur d'échelle appliqué au contexte avant le dessin. Assurez vous que la taille de la police est ajustée en fonction du ratio de stockage de support (backing store ratio) du canvas.
Stack technique
typescript
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-2 jours
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
TypeScriptCanvas renderingWebGL basicsHigh DPI awareness
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
65