Chromium

DEMO: https://codepen.io/bramus/pen/MWZjGeG

This demo uses a Scroll-Driven Animation to conditionally show the scroll indicators at the top/bottom of the scroller. This approach makes use of the fact that timelines are inactive when there is no overflow (see https://brm.us/can-scroll for more details on this technique).

@keyframes detect-scroll {
  from, to { --can-scroll: ;}
}


.container {
  overflow-y: auto;
  scroll-timeline: --scroll-timeline y;

  animation: detect-scroll;
  animation-timeline: --scroll-timeline;
  animation-fill-mode: none;
}

.up, .down {
  --visibility-if-can-scroll: var(--can-scroll) visible;
  --visibility-if-cant-scroll: hidden;
  visibility: var(--visibility-if-can-scroll, var(--visibility-if-cant-scroll));
}

The content in the scrollers in that demo is editable, through [contenteditable]. There seems to be some sort of invalidation bug when the scroller transitions from being scrollable to not scrollable … but only when the scroller was scrolled to the very end.

Steps to reproduce:

• Focus the left text
• Hit CMD+A to select all
• Hit BACKSPACE to remove all text

(Also see attached recording)

Expected behavior:

Don’t see scroll arrows appear

Actual behavior:

The scroll arrows both show.

This issue is most likely caused by the same underlying bug as reported in https://issues.chromium.org/issues/40947711