Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Renderer resizes and fully repaints every frame at a fractional devicePixelRatio (and leaves seams between cell backgrounds)

Abierto
  • ¿Algo no está bien?
#198 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
72/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

Start in the CanvasRenderer.render() and resize() paths mentioned in the report, then reproduce the issue at a fractional devicePixelRatio such as 1.36. Verify the canvas dimensions are compared using the same integer sizing that resize() applies, and check that idle frames no longer resize or fully repaint and that coloured cell backgrounds have no visible seams.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Version: ghostty-web 0.4.0-next.20.g1858a59 (also current main, 1858a59)

What happens
With a non-integer window.devicePixelRatio (browser zoom other than 100%, a scaled display, e.g.
1.36 or 2.2), the canvas renderer calls resize() and does a full redraw on every animation
frame, about 60 times a second while nothing changes. The caret and output look "busy", and CPU
use goes up. Cell backgrounds are also drawn at fractional device-pixel edges, which leaves
hairline seams (a visible grid) over coloured backgrounds.

Cause
CanvasRenderer.render() checks

this.canvas.width !== D.cols * this.metrics.width * this.devicePixelRatio

canvas.width is always an integer and the right-hand side is fractional at a fractional DPR, so
the check is true on every frame and resize() runs again, forcing a full redraw.

Repro
Open the demo, set browser zoom to 110% (or run Chrome with --force-device-scale-factor=1.36),
then wrap term.renderer.resize to count calls: about 60/s while idle. At DPR 1 or 2: 0/s.

Fix suggestion
Compare against Math.round(cols * width * dpr) (as resize() sets it), or render at
Math.ceil(devicePixelRatio) and let the browser scale the canvas down. The second also removes
the seams. We work around it by setting renderer.devicePixelRatio = Math.ceil(window.devicePixelRatio)
after open(), re-applied on a resolution media-query change. That took idle resizes from 60/s
to 0 and removed the seams.

Lenguaje dominante
TypeScript
Estrellas
2.9k
Forks
174
Sin PR fusionados en 30 d

Preparar el entorno

Aún no hemos revisado los archivos de configuración de este proyecto. Empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de coder/ghostty-web

Todos los issues de coder/ghostty-web

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.