Rendering glitches on scrolling

[darrenburns]

I'm seeing quite a lot of rendering glitches when scrolling in my demo app.

It was happening on 0.79.1, so I upgraded to main but I'm getting the same issue.

I'm unsure if there are specific circumstances which are triggering this - it seems to happen pretty consistently for me.

All I'm doing is scrolling to the top of a container which containers a bunch of widgets and then quickly scrolling back down. I'd say around a third of the time I get a glitch of some sort.

They look like this:

MRE

from __future__ import annotations
from typing import Any

from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.containers import Vertical, VerticalScroll
from textual.widgets import (
    DataTable,
    Footer,
    Input,
    Label,
    ListItem,
    ListView,
    OptionList,
    RadioSet,
    SelectionList,
    Switch,
    TextArea,
    Tree,
)
from textual.widgets._toggle_button import ToggleButton
from textual.widgets.option_list import Option
from textual.widgets.text_area import Selection

HEADERS = ("lane", "swimmer", "country", "time")
ROWS = [
    (4, "Joseph Schooling", "Singapore", 50.39),
    (2, "Michael Phelps", "United States", 51.14),
    (5, "Chad le Clos", "South Africa", 51.14),
    (6, "László Cseh", "Hungary", 51.14),
    (3, "Li Zhuhao", "China", 51.26),
    (8, "Mehdy Metella", "France", 51.58),
    (7, "Tom Shields", "United States", 51.73),
    (1, "Aleksandr Sadovnikov", "Russia", 51.84),
    (10, "Darren Burns", "Scotland", 51.84),
]

LOREM_IPSUM = """\
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed euismod, nunc sit amet aliquam lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet lorem. Sed euismod, nunc sit amet aliquam lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet lorem. Sed euismod, nunc sit amet aliquam lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet lorem.

Donec auctor, nisl eget ultricies ultricies, nunc nisl aliquam nisl, nec aliquam nisl nisl sit amet lorem. Sed euismod, nunc sit amet aliquam lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet lorem. Sed euismod, nunc sit amet aliquam lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet lorem.
"""

class ChangingThemeApp(App[None]):
    CSS = """
    Button {
        width: 1fr;
    }
    TextArea {
        height: 8;
    }
    DataTable {
        height: 8;
    }
    ColorSample {
        width: 1fr;
        color: $text;
        &.primary {
            background: $primary;   
        }
        &.secondary {
            background: $secondary;
        }
        &.accent {
            background: $accent;
        }
        &.warning {
            background: $warning;
        }
        &.error {
            background: $error;
        }
        &.success {
            background: $success;
        }
        &.background {
            background: $background;
        }
        &.surface {
            background: $surface;
        }
        &.panel {
            background: $panel;
        }
    }
    ListView {
        height: auto;
        & > ListItem {
            width: 1fr;
            & > Label {
                width: 1fr;
            }
        }
    }
    Tree {
        height: 5;
    }


    #palette {
        height: auto;
        margin: 1 2;
    }
    #widget-list {
        border: solid $primary;

        &:focus-within {
            border: solid $accent;
        }

        & > OptionList {
            height: 6;
        }
        & > RadioSet {
            height: 6;
        }
    }
    #widget-list > * {
        margin: 1 2;
    }
    """

    def compose(self) -> ComposeResult:
        with VerticalScroll(id="widget-list") as container:
            container.border_title = "Widget Gallery"
            container.can_focus = False
            yield Input(placeholder="Hello, world!")
            yield TextArea(LOREM_IPSUM)
            table = DataTable[Any]()
            table.add_columns(*HEADERS)
            table.add_rows(ROWS)
            yield table
            yield ListView(
                ListItem(Label("One")),
                ListItem(Label("Two")),
                ListItem(Label("Three")),
            )
            yield OptionList(
                "Aerilon",
                "Aquaria",
                "Canceron",
                "Caprica",
                "Gemenon",
                "Leonis",
                "Libran",
                "Picon",
                "Sagittaron",
                "Scorpia",
                "Tauron",
                "Virgon",
            )
            tree: Tree[str] = Tree("Dune")
            tree.root.expand()
            characters = tree.root.add("Characters", expand=True)
            characters.add_leaf("Paul")
            characters.add_leaf("Jessica")
            characters.add_leaf("Chani")
            yield tree

            yield Switch()
            yield ToggleButton(label="Toggle Button")

            yield SelectionList[int](
                ("Falken's Maze", 0, True),
                ("Black Jack", 1),
                ("Gin Rummy", 2),
                ("Hearts", 3),
                ("Bridge", 4),
                ("Checkers", 5),
                ("Chess", 6, True),
                ("Poker", 7),
                ("Fighter Combat", 8, True),
            )
            yield RadioSet(
                "Amanda",
                "Connor MacLeod",
                "Duncan MacLeod",
                "Heather MacLeod",
                "Joe Dawson",
                "Kurgan, [bold italic red]The[/]",
                "Methos",
                "Rachel Ellenstein",
                "Ramírez",
            )

        yield Footer()

    def on_mount(self) -> None:
        text_area = self.query_one(TextArea)
        text_area.selection = Selection((0, 0), (1, 10))


app = ChangingThemeApp()
if __name__ == "__main__":
    app.run()

[TomJGooding]

I did notice some other glitches when running this MRE, although they may be completely unrelated to this issue.

Watch the content of the TextArea after simply moving the mouse:

[darrenburns]

It looks like the initial wrapping in the text area is being computed and then re-computed after the cursor moves - my guess is that the initial render isn't accounting for the scrollbar (there should be a 1 cell gap at the end that in your video, before you move the cursor, appears to be missing/under the scrollbar).

[darrenburns]

Thanks @TomJGooding! I've created a standalone issue for that in #5103.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.