fix for flicker

[willmcgugan]

Fixes #4141

Fix for flicker where scrollbars "ping pong" between two states. The root of the problem was where both scrollbars were "auto".

Removed the "stabilized_scrollbar" attribute. That may have worked at some point, but didn't really do anything.

[rodrigogiraoserrao]

This doesn't handle the cases where both scrollbars are auto and they both need to appear and the second one only appears on the second pass (the one that's guarded behind the extra if this PR adds).
For example, take the app below:

from textual.app import App, ComposeResult
from textual.widgets import Label


class A(App[None]):
    CSS = """
    Screen {
        overflow: auto auto;
    }
    #one, #two {
        width: 80;
    }
    #one {
        height: 1;
        background: red;
    }

    #two {
        height: 100%;
        background: blue;
    }
    """

    def compose(self) -> ComposeResult:
        yield Label("one", id="one")
        yield Label("two", id="two")


if __name__ == "__main__":
    A().run()

If you set your terminal to have width equal to 80 (or set width: xxx to the width of your terminal) then we should have a vertical scrollbar and a horizontal one.
If you make the terminal wider, then you have only the vertical scrollbar which is correct.
If you shorten the terminal, then the horizontal scrollbar shows up but the vertical one disappears!
The recording below shows this.

Screen.Recording.2024-03-20.at.15.12.53.mov

[willmcgugan]

#executivedecision

@rodrigogiraoserrao If you can break this, let me know.

[rodrigogiraoserrao]

It's definitely an improvement but now there's flickering... 😢

E.g., run this app and press A. More often than not you can see the horizontal scrollbar flicker.
Do I open a follow-up issue?

Like I said before, I'm sure there's an issue with the way in which we compute whether scrollbars are needed or not. 🤷

from textual.app import App, ComposeResult
from textual.widget import Widget


class A(App[None]):
    CSS = """
    Screen {
        overflow: auto auto;
    }
    #one {
        height: 1;
    }
    #two {
        height: 100%;
    }
    """

    def compose(self) -> ComposeResult:
        yield Widget(id="one")

    def key_a(self) -> None:
        self.mount(Widget(id="two"))


if __name__ == "__main__":
    A().run()