charmbracelet / charmbracelet/bubbletea

Altscreen: rendering artifacts when resizing window

Open
#573 13 comments 1 reaction 0 assignees View on GitHub
bug
Dominant language
Go
Stars
44.9k
Forks
1.3k
PR merge metrics
No merged PRs in 30d

Description

Raising this issue based on the discussion with @muesli #544

It appears that with some terminals if you use `lipgloss` to fill available space with a background colour it automatically pads with whitespace. This causes a rendering glitch when you resize the terminal window due to word wrapping. A terminal such as Alacritty doesn't exhibit this behaviour. From testing, it exhibits this behaviour with iTerm2 and the native Mac Terminal.app.

https://user-images.githubusercontent.com/106762954/196023116-87c03990-5678-4c9e-95f7-46c6dbfcb074.mov

A potential solution is to fill the available height of the terminal with empty lines to prevent this wrapping behaviour.

Example App:

```go
package main

import (
"log"
"strings"

tea "github.com/charmbracelet/bubbletea"
"github.com/charmbracelet/lipgloss"
)

var (
PrimaryColour = lipgloss.Color("#3a1577")

Banner = lipgloss.NewStyle().Background(PrimaryColour).Height(2)
)

type model struct {
width int
text string
}

func (m model) Init() tea.Cmd {
return nil
}

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
cmds := make([]tea.Cmd, 0)

switch msg := msg.(type) {
case tea.WindowSizeMsg:
m.width = msg.Width
case tea.KeyMsg:
switch msg.String() {
case "ctrl+c":
return m, tea.Quit
}
}

return m, tea.Batch(cmds...)
}

func (m model) View() string {
var b strings.Builder

b.WriteString(Banner.Copy().Width(m.width).Render(m.text))
return b.String()
}

func main() {
m := model{
text: "hello!",
}

if err := tea.NewProgram(m, tea.WithAltScreen()).Start(); err != nil {
log.Fatal(err)
}
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.