charmbracelet / charmbracelet/bubbletea
Altscreen: rendering artifacts when resizing window
- 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
Assessment
This issue has not been assessed yet.