xtermjs/xterm.js

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

Open

#4.728 aberto em 25 de ago. de 2023

Ver no GitHub
 (13 comments) (0 reactions) (0 assignees)TypeScript (1.574 forks)batch import
area/addon/webglarea/mobilehelp wantedtype/bug

Métricas do repositório

Stars
 (16.196 stars)
Métricas de merge de PR
 (Mesclagem média 4d 3h) (81 fundiu PRs em 30d)

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

Guia do colaborador

Direção de pesquisa
Investigue a renderização de fontes nos addons Canvas e WebGL, focando em como o devicePixelRatio é tratado. O problema sugere que o tamanho da fonte não é multiplicado pelo inverso do DPR ao desenhar. Verifique os métodos 'drawText' ou 'renderGlyph' nos respectivos renderizadores. Procure por quaisquer fatores de escala aplicados ao contexto antes do desenho. Certifique se de que o tamanho da fonte seja ajustado de acordo com a taxa de armazenamento de suporte (backing store ratio) da canvas.
Pilha de tecnologia
typescript
Domain
frontend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-2 dias
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
TypeScriptCanvas renderingWebGL basicsHigh DPI awareness
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
65